From 56f1851bbbfd9fcf0f8cf66a40335bde88685075 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Thu, 23 Feb 2023 12:52:23 +0100
Subject: [PATCH] finished imagedownload strategy

---
 .../src/lib/utilities/UmlDownloadStrategy.ts  | 43 +++++++++++--------
 package.json                                  |  1 +
 yarn.lock                                     | 22 ++++++++++
 3 files changed, 49 insertions(+), 17 deletions(-)

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 91879fead0..0495a9e8c4 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,5 +1,7 @@
 import jsPDF from 'jspdf'
 import 'svg2pdf.js'
+import { SVG } from '@svgdotjs/svg.js'
+import { Canvg } from 'canvg'
 
 
 const jsPdf = new jsPDF('landscape', 'px', 'a4')
@@ -50,23 +52,30 @@ class PdfUmlDownloadStrategy implements IUmlDownloadStrategy {
 
 class ImageUmlDownloadStrategy implements IUmlDownloadStrategy {
   public download (uml: string, fileName: string): void {
-  //   const svg = new Blob([uml], { type: 'image/svg+xml;charset=utf-8' })
-  //   const url = URL.createObjectURL(svg)
-  //   const img = new Image()
-  //   img.onload = () => {
-  //     const canvas = document.createElement('canvas')
-  //     canvas.width = img.width
-  //     canvas.height = img.height
-  //     const ctx = canvas.getContext('2d')
-  //     ctx.drawImage(img, 0, 0)
-  //     const png = canvas.toDataURL('image/png')
-  //     const a = document.createElement('a')
-  //     a.download = fileName.split('/')[1].split('.')[0].concat('.png')
-  //     a.href = png
-  //     a.click()
-  //   }
-  //   img.src = url
-  // }
+    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')
+    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))
+      const png = canvas.toDataURL('image/png')
+      const a = document.createElement('a')
+      a.download = fileName.split('/')[1].split('.')[0].concat('.png')
+      a.href = png
+      console.log('about to click the link to download the png!!!')
+      a.click()
+    }
+    img.src = url
   }
 }
 
diff --git a/package.json b/package.json
index 7f98823436..1979835dca 100644
--- a/package.json
+++ b/package.json
@@ -146,6 +146,7 @@
     "bn.js": "^5.1.2",
     "bootstrap": "^5.2.2",
     "brace": "^0.8.0",
+    "canvg": "^4.0.1",
     "change-case": "^4.1.1",
     "chokidar": "^2.1.8",
     "color-support": "^1.1.3",
diff --git a/yarn.lock b/yarn.lock
index 0a19dd8039..9f33d8a46d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5619,6 +5619,11 @@
   dependencies:
     antlr4ts "^0.5.0-alpha.4"
 
+"@svgdotjs/svg.js@^3.1.2":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@svgdotjs/svg.js/-/svg.js-3.1.2.tgz#acd62ebc5a6ef5b3a70e4a3912ce643a150c56e7"
+  integrity sha512-0ZCWTiuRjCXT2SUoVDiu+8DLuRQlkxZbO680Y2QkV7jNsULzJajrx6A3MxA/IBQg6UGV5csgPZ8w7U57hZSK+A==
+
 "@svgr/babel-plugin-add-jsx-attribute@^6.5.1":
   version "6.5.1"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-6.5.1.tgz#74a5d648bd0347bda99d82409d87b8ca80b9a1ba"
@@ -6155,6 +6160,11 @@
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301"
   integrity sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==
 
+"@types/offscreencanvas@^2019.6.4":
+  version "2019.7.0"
+  resolved "https://registry.yarnpkg.com/@types/offscreencanvas/-/offscreencanvas-2019.7.0.tgz#e4a932069db47bb3eabeb0b305502d01586fa90d"
+  integrity sha512-PGcyveRIpL1XIqK8eBsmRBt76eFgtzuPiSTyKHZxnGemp2yzGzWpjYKAfK3wIMiU7eH+851yEpiuP8JZerTmWg==
+
 "@types/parse-json@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
@@ -9295,6 +9305,18 @@ canvg@^3.0.6:
     stackblur-canvas "^2.0.0"
     svg-pathdata "^6.0.3"
 
+canvg@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/canvg/-/canvg-4.0.1.tgz#122532dffeff6fc36074582af2cd37c454ae9ffa"
+  integrity sha512-5gD/d6SiCCT7baLnVr0hokYe93DfcHW2rSqdKOuOQD84YMlyfttnZ8iQsThTdX6koYam+PROz/FuQTo500zqGw==
+  dependencies:
+    "@types/offscreencanvas" "^2019.6.4"
+    "@types/raf" "^3.4.0"
+    raf "^3.4.1"
+    rgbcolor "^1.0.1"
+    stackblur-canvas "^2.0.0"
+    svg-pathdata "^6.0.3"
+
 capital-case@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/capital-case/-/capital-case-1.0.4.tgz#9d130292353c9249f6b00fa5852bee38a717e669"