complete pdf download feature

apps/remix-ide/src/app/plugins/solidity-umlgen.tsx

@@ -83,6 +83,7 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen {
         const umlDot = convertUmlClasses2Dot(umlClasses)
         const payload = vizRenderStringSync(umlDot)
         this.updatedSvg = payload
+        _paq.push(['trackEvent', 'solidityumlgen', 'umlgenerated'])
         this.renderComponent()
         await this.call('tabs', 'focus', 'solidityumlgen')
       } catch (error) {
@@ -117,6 +118,7 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen {
   generateCustomAction = async (action: customAction) => {
     this.updatedSvg = this.updatedSvg.startsWith('<?xml') ? '' : this.updatedSvg
     this.currentFile = action.path[0]
+    _paq.push(['trackEvent', 'solidityumlgen', 'activated'])
     await this.generateUml(action.path[0])
   }
 

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

@@ -65,7 +65,7 @@ export default function UmlDownload(props: UmlDownloadProps) {
                 <div
                   data-id='umlPngDownload'
                   onClick={() => {
-                    _paq.push(['trackEvent', 'solUmlgen', 'download', 'downloadAsPng'])
+                    _paq.push(['trackEvent', 'solidityumlgen', 'download', 'downloadAsPng'])
                     props.download('png')
                   }}
                 >
@@ -73,7 +73,7 @@ export default function UmlDownload(props: UmlDownloadProps) {
                     id='umlPngDownloadBtn'
                     data-id='umlPngDownload'
                     onClick={() => {
-                      _paq.push(['trackEvent', 'solUmlgen', 'download', 'downloadAsPng'])
+                      _paq.push(['trackEvent', 'solidityumlgen', 'download', 'downloadAsPng'])
                       props.download('png')
                     }}
                     className='far fa-image pl-2'

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

@@ -21,10 +21,6 @@ interface ActionButtonsProps {
   }
 }
 
-const _paq = window._paq = window._paq || []
-
-
-
 let umlCopy = ''
 export function RemixUiSolidityUmlGen ({ updatedSvg, loading, fileName }: RemixUiSolidityUmlGenProps) {
   const [showViewer, setShowViewer] = useState(false)
@@ -45,11 +41,11 @@ export function RemixUiSolidityUmlGen ({ updatedSvg, loading, fileName }: RemixU
   const final = btoa(String.fromCharCode.apply(null, data))
 
   const download = useCallback((fileType: UmlFileType) => {
-    console.log({ umlCopy, validSvg })
     if (umlCopy.length === 0) {
       console.log('svg not valid yet!')
       return
     }
+    console.log({ umlCopy })
     umlDownloader.download(umlCopy, fileName, fileType)
   }, [updatedSvg, fileName])
 

libs/remix-ui/solidity-uml-gen/src/lib/utilities/UmlDownloadStrategy.ts

@@ -1,8 +1,5 @@
 import jsPDF from 'jspdf'
 import 'svg2pdf.js'
-
-const jsPdf = new jsPDF('landscape', 'px', 'a4')
-
 interface IUmlDownloadStrategy {
   download (uml: string, fileName: string): void
 }
@@ -10,40 +7,33 @@ interface IUmlDownloadStrategy {
 export type UmlFileType = 'pdf' | 'png'
 
 class PdfUmlDownloadStrategy implements IUmlDownloadStrategy {
-  doc: jsPDF
+
-  constructor(pdf: jsPDF) {
-    this.doc = pdf
-  }
   public download (uml: string, fileName: string): void {
-    const parser = new DOMParser()
+    const svg = new Blob([uml], { type: 'image/svg+xml;charset=utf-8' })
-    const parsedDocument = parser.parseFromString(uml, 'image/svg+xml')
+    const Url = window.URL || window.webkitURL
-    const element = parsedDocument.documentElement
+    const url = Url.createObjectURL(svg)
-    const pageWidth = this.doc.internal.pageSize.getWidth()
+    const img = document.createElement('img')
-    const pageHeight = this.doc.internal.pageSize.getHeight()
+    let doc: jsPDF
-    const widthScale = pageWidth / parseInt(element.getAttribute('width'))
+    img.onload = () => {
-    const heightScale = pageHeight / parseInt(element.getAttribute('height'))
+      const canvas = document.createElement('canvas')
-    const scale = Math.min(widthScale, heightScale)
+      canvas.width = img.naturalWidth
-    element.setAttribute('width', (parseInt(element.getAttribute('width')) * scale).toString())
+      canvas.height = img.naturalHeight
-    element.setAttribute('height', (parseInt(element.getAttribute('height')) * scale).toString())
+      const ctx = canvas.getContext('2d')
-    console.log({ element, pageWidth, pageHeight, widthScale, heightScale, scale })
+      const scale = window.devicePixelRatio*1
-    this.doc.svg(element, {
+      canvas.style.width = `${Math.round(img.naturalWidth/scale)}`.concat('px')
-      x: 10,
+      canvas.style.height = `${Math.round(img.naturalHeight/scale)}`.concat('px')
-      y: 10,
+      canvas.style.margin = '0'
-      width: pageWidth,
+      canvas.style.padding = '0'
-      height: pageHeight
+      ctx.scale(window.devicePixelRatio, window.devicePixelRatio)
-    }).then(() => {
+      ctx.drawImage(img, 0, 0, Math.round(img.naturalWidth/scale), Math.round(img.naturalHeight/scale))
-      const pages = this.doc.internal.pages
+      doc = new jsPDF('landscape', 'px', [img.naturalHeight, img.naturalWidth])
-      console.log({ pages })
+      const pageWidth = doc.internal.pageSize.getWidth()
-      this.doc.save(fileName.split('/')[1].split('.')[0].concat('.pdf'))
+      const pageHeight = doc.internal.pageSize.getHeight()
-    }).catch((err) => {
+      doc.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, pageWidth, pageHeight)
-      console.log(err)
+      doc.save(fileName.split('/')[1].split('.')[0].concat('.pdf'))
-    })
+    }
-    // const options = {
+    img.src = url
-    //   filename: fileName.split('/')[1].split('.')[0].concat('.pdf')
+    doc = null
-    // }
-    // downloadPdf(element, options, function(t) {
-    //   console.log({ t })
-    // })
   }
 }
 
@@ -85,7 +75,7 @@ export class UmlDownloadContext {
 
   public download (uml: string, fileName: string, fileType: UmlFileType ): void {
     if (fileType === 'pdf') {
-      this.setStrategy(new PdfUmlDownloadStrategy(jsPdf))
+      this.setStrategy(new PdfUmlDownloadStrategy())
     } else if (fileType === 'png') {
       this.setStrategy(new ImageUmlDownloadStrategy())
     } else {