add zoom buttons

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

@@ -1,5 +1,5 @@
 import { CustomTooltip } from '@remix-ui/helper'
-import React, { Fragment, useEffect, useState } from 'react'
+import React, { Fragment, useEffect, useRef, useState } from 'react'
 import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch'
 import { ISolidityUmlGen } from '../types'
 import './css/solidity-uml-gen.css'
@@ -37,7 +37,7 @@ const ActionButtons = ({ buttons }: ActionButtonsProps) => (
           disabled={!btn.svgValid}
           onClick={btn.action}
         >
-          <i className={btn.icon}></i>
+          <i className={`${btn.icon}`}></i>
         </button>
       </CustomTooltip>
     ))}
@@ -48,6 +48,8 @@ export function RemixUiSolidityUmlGen ({ plugin, updatedSvg, loading, themeSelec
   const [showViewer, setShowViewer] = useState(false)
   const [svgPayload, setSVGPayload] = useState<string>('')
   const [validSvg, setValidSvg] = useState(false)
+  const svgRef = useRef<HTMLImageElement>(null)
+  const buttonsRef = useRef<HTMLDivElement>(null)
 
 
 
@@ -57,12 +59,24 @@ export function RemixUiSolidityUmlGen ({ plugin, updatedSvg, loading, themeSelec
   }
   , [updatedSvg])
 
+  useEffect(() => {
+    svgRef?.current?.addEventListener('mouseover', () => console.log('move over the image'))//buttonsRef?.current?.classList.remove('d-none'))
+    svgRef?.current?.addEventListener('mouseout', () => console.log('mouse out of the image')) //buttonsRef?.current?.classList.add('d-none'))
+    const svgimg = document.querySelector('#umlImage') as HTMLImageElement
+    svgimg?.addEventListener('mouseover', () => console.log('mouse over the image'))
+    svgimg?.addEventListener('mouseout', () => console.log('mouse out of the image'))
+    return () => {
+      svgRef?.current?.removeEventListener('mouseover', () => buttonsRef?.current?.classList.remove('d-none'))
+      svgRef?.current?.removeEventListener('mouseout', () => buttonsRef?.current?.classList.add('d-none'))
+    }
+  },[])
+
   const buttons: ButtonAction[] = [
     { 
       buttonText: 'Download as PDF',
       svgValid: () => validSvg,
       action: () => console.log('generated!!'),
-      icon: 'fa mr-1 pt-1 pb-1 fa-file'
+      icon: 'fa fa-file'
     },
     { 
       buttonText: 'Download as PNG',
@@ -82,8 +96,7 @@ export function RemixUiSolidityUmlGen ({ plugin, updatedSvg, loading, themeSelec
   const Display = () => {
     const invert = themeSelected === 'dark' ? 'invert(0.8)' : 'invert(0)'
     return (
-    <div className="d-flex flex-column justify-content-center align-items-center">
-      <div id="umlImageHolder" className="w-100 px-2 py-2">
+      <div id="umlImageHolder" className="w-100 px-2 py-2 d-flex">
         { validSvg && showViewer ? (
           <TransformWrapper
             initialScale={1}
@@ -91,13 +104,28 @@ export function RemixUiSolidityUmlGen ({ plugin, updatedSvg, loading, themeSelec
             {
               ({ zoomIn, zoomOut, resetTransform }) => (
                 <Fragment>
-                  <ActionButtons buttons={buttons} />
-                  <TransformComponent>
+                  <div ref={buttonsRef} className="position-absolute bg-transparent rounded p-2" id="buttons"
+                    style={{ zIndex: 3,  top: '10', right: '2em' }}
+                  >
+                    <button className="btn btn-outline-success btn-sm rounded-circle mr-1" onClick={() => zoomIn()}>
+                      <i className="fa fa-plus"></i>
+                    </button>
+                    <button className="btn btn-outline-warning btn-sm rounded-circle mr-1" onClick={() => zoomOut()}>
+                      <i className="fa fa-minus"></i>
+                    </button>
+                    <button className="btn btn-outline-danger btn-sm rounded-circle mr-1" onClick={() => resetTransform()}>
+                      <i className="fa fa-arrow-circle-left"></i>
+                    </button>
+                  </div>
+                  <TransformComponent contentStyle={{ zIndex: 2 }}>
                     <img
+                      id="umlImage"
                       src={`data:image/svg+xml;base64,${btoa(plugin.updatedSvg ?? svgPayload)}`}
                       width={'100%'}
                       height={'auto'}
+                      ref={svgRef}
                       style={{ filter: invert }}
+                      className="position-relative"
                     />
                   </TransformComponent>
                 </Fragment>
@@ -108,7 +136,6 @@ export function RemixUiSolidityUmlGen ({ plugin, updatedSvg, loading, themeSelec
             <i className="fas fa-spinner fa-spin fa-4x"></i>
           </div> : <DefaultInfo />}
       </div>
-    </div>
   )}
   return (<>
     { <Display /> }