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, 
+export const Markup = React.forwardRef(
-  onClick: (e) => void, icon: string, className: string }, ref: Ref<HTMLButtonElement>) => (
+  (
-  <button
+    {
-    ref={ref}
+      children,
-    onClick={(e) => {
+      onClick,
-      e.preventDefault()
+      icon,
-      onClick(e)
+      className = "",
-    }}
+    }: {
-    className={className.replace('dropdown-toggle', '')}
+      children: React.ReactNode
-  >
+      onClick: (e) => void
-    <i className={icon}></i>
+      icon: string
-  </button>
+      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' }}>
+        <ul
-          {
+          className="overflow-auto list-unstyled mb-0"
-           children
+          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'])
+              _paq.push([
-              props.download('png')
+                "trackEvent",
+                "solidityumlgen",
+                "download",
+                "downloadAsPng",
+              ]);
+              props.download("png")
             }}
           >
             <CustomTooltip
-                placement="left-start"
+              placement="left-start"
-                tooltipId="solUmlgenDownloadAsPngTooltip"
+              tooltipId="solUmlgenDownloadAsPngTooltip"
-                tooltipClasses="text-nowrap"
+              tooltipClasses="text-nowrap"
-                tooltipText={'Download UML diagram as a PNG file'}
+              tooltipText={"Download UML diagram as a PNG file"}
             >
-                <div
+              <div data-id="umlPngDownload">
-                  data-id='umlPngDownload'
+                <span
-                >
+                  id="umlPngDownloadBtn"
-                  <span
+                  data-id="umlPngDownload"
-                    id='umlPngDownloadBtn'
+                  className="far fa-image pl-2"
-                    data-id='umlPngDownload'
+                ></span>
-                    className='far fa-image pl-2'
+                <span className="pl-1">Download as PNG</span>
-                  >
+              </div>
-                  </span>
+            </CustomTooltip>
-                  <span className="pl-1">
+          </Dropdown.Item>
-                    Download as PNG
+          <Dropdown.Divider />
-                  </span>
+          <Dropdown.Item
-                </div>
+            onClick={() => {
-              </CustomTooltip>
+              _paq.push([
-            </Dropdown.Item>
+                "trackEvent",
-            <Dropdown.Divider />
+                "solUmlgen",
-            <Dropdown.Item onClick={() => {
+                "download",
-                _paq.push(['trackEvent', 'solUmlgen', 'download', 'downloadAsPdf'])
+                "downloadAsPdf",
-                props.download('pdf')
+              ]);
-              }}
+              props.download("pdf")
+            }}
+          >
+            <CustomTooltip
+              placement="left-start"
+              tooltipId="solUmlgenDownloadAsPdfTooltip"
+              tooltipClasses="text-nowrap"
+              tooltipText={"Download UML diagram as a PDF file"}
             >
-              <CustomTooltip
+              <div data-id="umlPdfDownload">
-                  placement="left-start"
+                <span
-                  tooltipId="solUmlgenDownloadAsPdfTooltip"
+                  id="umlPdfDownloadBtn"
-                  tooltipClasses="text-nowrap"
+                  data-id="umlPdfDownload"
-                  tooltipText={'Download UML diagram as a PDF file'}
+                  className="far fa-file-pdf pl-2"
-              >
+                ></span>
-                <div
+                <span className="pl-2">Download as PDF</span>
-                  data-id='umlPdfDownload'
+              </div>
-                >
+            </CustomTooltip>
-                  <span
+          </Dropdown.Item>
-                    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>
   )
 }
-

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;
 }

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:
+react-zoom-pan-pinch@^3.0.2:
-  version "2.2.0"
+  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/react-zoom-pan-pinch/-/react-zoom-pan-pinch-2.2.0.tgz#15dd97aef798699016e4e30182cc51c4bddd4739"
+  resolved "https://registry.yarnpkg.com/react-zoom-pan-pinch/-/react-zoom-pan-pinch-3.0.2.tgz#706c67e875e9a30480cdbef8dd4e3d6fdac9921c"
-  integrity sha512-khOlTeTI/ZXtbCfqUmkKW0HpM+w0RklEQ1DlFVi0D9y90r+Z8x+ipKBXvPQC3rUu5VoYK4603SY8GsA6enfa8w==
+  integrity sha512-c8BxPl/zK6RiOYrV/xBQ+ebgZpsMvbz6WOoqv2P/1QWxGCk1+q3xWF+5ub4QYasv4W8+J6vSelOR8H0WCEbL4w==
 
 react@^17.0.2:
   version "17.0.2"