From 7b1898eb802c1c55f68f0723ae9f693357fdcd11 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Tue, 7 Nov 2023 10:42:15 +0000
Subject: [PATCH] fix: Moved svg to png to a util function

---
 .../virtual-cell/barcode/JsBarcodeWrapper.vue | 68 +------------------
 packages/nc-gui/utils/svgToPng.ts             | 68 +++++++++++++++++++
 2 files changed, 69 insertions(+), 67 deletions(-)
 create mode 100644 packages/nc-gui/utils/svgToPng.ts

diff --git a/packages/nc-gui/components/virtual-cell/barcode/JsBarcodeWrapper.vue b/packages/nc-gui/components/virtual-cell/barcode/JsBarcodeWrapper.vue
index c361bb32fa..ef43ef9df1 100644
--- a/packages/nc-gui/components/virtual-cell/barcode/JsBarcodeWrapper.vue
+++ b/packages/nc-gui/components/virtual-cell/barcode/JsBarcodeWrapper.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import JsBarcode from 'jsbarcode'
 import { IsGalleryInj, onMounted } from '#imports'
+import { downloadSvg as _downloadSvg } from '~/utils/svgToPng'
 
 const props = defineProps({
   barcodeValue: { type: String, required: true },
@@ -35,73 +36,6 @@ const generate = () => {
   }
 }
 
-function copyStylesInline(destinationNode: any, sourceNode: any) {
-  const containerElements = ['svg', 'g']
-  for (let cd = 0; cd < destinationNode.childNodes.length; cd++) {
-    const child = destinationNode.childNodes[cd]
-    if (containerElements.includes(child.tagName)) {
-      copyStylesInline(child, sourceNode.childNodes[cd])
-      continue
-    }
-
-    const style = sourceNode.childNodes[cd].currentStyle || window.getComputedStyle(sourceNode.childNodes[cd])
-    if (style === 'undefined' || style == null) continue
-    for (let st = 0; st < style.length; st++) {
-      child.style.setProperty(style[st], style.getPropertyValue(style[st]))
-    }
-  }
-}
-
-function triggerDownload(imgURI: string, fileName: string) {
-  const evt = new MouseEvent('click', {
-    view: window,
-    bubbles: false,
-    cancelable: true,
-  })
-  const a = document.createElement('a')
-  a.setAttribute('download', fileName)
-  a.setAttribute('href', imgURI)
-  a.setAttribute('target', '_blank')
-  a.dispatchEvent(evt)
-}
-
-function _downloadSvg(svg: SVGGraphicsElement, fileName: string) {
-  const copy = svg.cloneNode(true)
-
-  copyStylesInline(copy, svg)
-
-  const canvas = document.createElement('canvas')
-  const bbox = svg.getBBox()
-  canvas.width = bbox.width
-  canvas.height = bbox.height
-
-  const ctx = canvas.getContext('2d')!
-  ctx.clearRect(0, 0, bbox.width, bbox.height)
-
-  const data = new XMLSerializer().serializeToString(copy)
-  const DOMURL = window.URL || window.webkitURL || window
-  const img = new Image()
-  const svgBlob = new Blob([data], { type: 'image/svg+xml;charset=utf-8' })
-  const url = DOMURL.createObjectURL(svgBlob)
-
-  img.onload = function () {
-    ctx.drawImage(img, 0, 0)
-    DOMURL.revokeObjectURL(url)
-    if (typeof navigator !== 'undefined' && navigator.msSaveOrOpenBlob) {
-      const blob = canvas.msToBlob()
-      navigator.msSaveOrOpenBlob(blob, fileName)
-    } else {
-      const imgURI = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream')
-      triggerDownload(imgURI, fileName)
-    }
-    console.log(canvas)
-
-    // TODO: Somehow canvas dom element is getting deleted
-    // document.removeChild(canvas)
-  }
-  img.src = url
-}
-
 const downloadSvg = () => {
   if (!barcodeSvgRef.value) return
 
diff --git a/packages/nc-gui/utils/svgToPng.ts b/packages/nc-gui/utils/svgToPng.ts
new file mode 100644
index 0000000000..a98a1c2862
--- /dev/null
+++ b/packages/nc-gui/utils/svgToPng.ts
@@ -0,0 +1,68 @@
+function copyStylesInline(destinationNode: any, sourceNode: any) {
+  const containerElements = ['svg', 'g']
+  for (let cd = 0; cd < destinationNode.childNodes.length; cd++) {
+    const child = destinationNode.childNodes[cd]
+    if (containerElements.includes(child.tagName)) {
+      copyStylesInline(child, sourceNode.childNodes[cd])
+      continue
+    }
+
+    const style = sourceNode.childNodes[cd].currentStyle || window.getComputedStyle(sourceNode.childNodes[cd])
+    if (style === 'undefined' || style == null) continue
+    for (let st = 0; st < style.length; st++) {
+      child.style.setProperty(style[st], style.getPropertyValue(style[st]))
+    }
+  }
+}
+
+function triggerDownload(imgURI: string, fileName: string) {
+  const evt = new MouseEvent('click', {
+    view: window,
+    bubbles: false,
+    cancelable: true,
+  })
+  const a = document.createElement('a')
+  a.setAttribute('download', fileName)
+  a.setAttribute('href', imgURI)
+  a.setAttribute('target', '_blank')
+  a.dispatchEvent(evt)
+}
+
+function downloadSvg(svg: SVGGraphicsElement, fileName: string) {
+  const copy = svg.cloneNode(true)
+
+  copyStylesInline(copy, svg)
+
+  const canvas = document.createElement('canvas')
+  const bbox = svg.getBBox()
+  canvas.width = bbox.width
+  canvas.height = bbox.height
+
+  const ctx = canvas.getContext('2d')!
+  ctx.clearRect(0, 0, bbox.width, bbox.height)
+
+  const data = new XMLSerializer().serializeToString(copy)
+  const DOMURL = window.URL || window.webkitURL || window
+  const img = new Image()
+  const svgBlob = new Blob([data], { type: 'image/svg+xml;charset=utf-8' })
+  const url = DOMURL.createObjectURL(svgBlob)
+
+  img.onload = function () {
+    ctx.drawImage(img, 0, 0)
+    DOMURL.revokeObjectURL(url)
+    if (typeof navigator !== 'undefined' && navigator.msSaveOrOpenBlob) {
+      const blob = canvas.msToBlob()
+      navigator.msSaveOrOpenBlob(blob, fileName)
+    } else {
+      const imgURI = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream')
+      triggerDownload(imgURI, fileName)
+    }
+    console.log(canvas)
+
+    // TODO: Somehow canvas dom element is getting deleted
+    // document.removeChild(canvas)
+  }
+  img.src = url
+}
+
+export { downloadSvg }