diff --git a/apps/remix-ide/src/app/plugins/solidity-umlgen.tsx b/apps/remix-ide/src/app/plugins/solidity-umlgen.tsx index 3bcf5ae89e..8c9341f6d5 100644 --- a/apps/remix-ide/src/app/plugins/solidity-umlgen.tsx +++ b/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(' { - _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' diff --git 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 index 7cf7df5660..565f90c795 100644 --- 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 @@ -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]) diff --git a/libs/remix-ui/solidity-uml-gen/src/lib/utilities/UmlDownloadStrategy.ts b/libs/remix-ui/solidity-uml-gen/src/lib/utilities/UmlDownloadStrategy.ts index 1a887d83f6..237e37efba 100644 --- a/libs/remix-ui/solidity-uml-gen/src/lib/utilities/UmlDownloadStrategy.ts +++ b/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 parsedDocument = parser.parseFromString(uml, 'image/svg+xml') - const element = parsedDocument.documentElement - const pageWidth = this.doc.internal.pageSize.getWidth() - const pageHeight = this.doc.internal.pageSize.getHeight() - const widthScale = pageWidth / parseInt(element.getAttribute('width')) - const heightScale = pageHeight / parseInt(element.getAttribute('height')) - const scale = Math.min(widthScale, heightScale) - element.setAttribute('width', (parseInt(element.getAttribute('width')) * scale).toString()) - element.setAttribute('height', (parseInt(element.getAttribute('height')) * scale).toString()) - console.log({ element, pageWidth, pageHeight, widthScale, heightScale, scale }) - this.doc.svg(element, { - x: 10, - y: 10, - width: pageWidth, - height: pageHeight - }).then(() => { - const pages = this.doc.internal.pages - console.log({ pages }) - this.doc.save(fileName.split('/')[1].split('.')[0].concat('.pdf')) - }).catch((err) => { - console.log(err) - }) - // const options = { - // filename: fileName.split('/')[1].split('.')[0].concat('.pdf') - // } - // downloadPdf(element, options, function(t) { - // console.log({ t }) - // }) + const svg = new Blob([uml], { type: 'image/svg+xml;charset=utf-8' }) + const Url = window.URL || window.webkitURL + const url = Url.createObjectURL(svg) + const img = document.createElement('img') + let doc: jsPDF + img.onload = () => { + const canvas = document.createElement('canvas') + canvas.width = img.naturalWidth + canvas.height = img.naturalHeight + const ctx = canvas.getContext('2d') + const scale = window.devicePixelRatio*1 + canvas.style.width = `${Math.round(img.naturalWidth/scale)}`.concat('px') + canvas.style.height = `${Math.round(img.naturalHeight/scale)}`.concat('px') + canvas.style.margin = '0' + canvas.style.padding = '0' + ctx.scale(window.devicePixelRatio, window.devicePixelRatio) + ctx.drawImage(img, 0, 0, Math.round(img.naturalWidth/scale), Math.round(img.naturalHeight/scale)) + doc = new jsPDF('landscape', 'px', [img.naturalHeight, img.naturalWidth]) + const pageWidth = doc.internal.pageSize.getWidth() + const pageHeight = doc.internal.pageSize.getHeight() + doc.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, pageWidth, pageHeight) + doc.save(fileName.split('/')[1].split('.')[0].concat('.pdf')) + } + img.src = url + doc = null } } @@ -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 {