exportImage function working

5 files changed, 87 insertions, 60 deletions

diff --git a/blocks/eda-frontend/package-lock.json b/blocks/eda-frontend/package-lock.json
index a1233305..d3bbc789 100644
--- a/blocks/eda-frontend/package-lock.json
+++ b/blocks/eda-frontend/package-lock.json
@@ -12,7 +12,7 @@
         "@material-ui/icons": "^4.9.1",
         "@material-ui/lab": "^4.0.0-alpha.52",
         "axios": "^1.6.7",
-        "canvg": "^4.0.1",
+        "canvg": "^4.0.2",
         "file-saver": "^2.0.2",
         "highcharts": "^11.3.0",
         "highcharts-react-official": "^3.1.0",
diff --git a/blocks/eda-frontend/package.json b/blocks/eda-frontend/package.json
index 7895581e..c8fd4b73 100644
--- a/blocks/eda-frontend/package.json
+++ b/blocks/eda-frontend/package.json
@@ -8,7 +8,7 @@
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.52",
     "axios": "^1.6.7",
-    "canvg": "^4.0.1",
+    "canvg": "^4.0.2",
     "file-saver": "^2.0.2",
     "highcharts": "^11.3.0",
     "highcharts-react-official": "^3.1.0",
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js b/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js
index 8101fdb4..14e92bec 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js
@@ -150,62 +150,84 @@ export default function SchematicToolbar ({ mobileClose, gridRef }) {
 
   // Image Export of Schematic Diagram
   async function exportImage (type) {
-    const svg = document.querySelector('#divGrid > svg').cloneNode(true)
-    svg.removeAttribute('style')
-    svg.setAttribute('width', gridRef.current.scrollWidth)
-    svg.setAttribute('height', gridRef.current.scrollHeight)
-    const canvas = document.createElement('canvas')
-    canvas.width = gridRef.current.scrollWidth
-    canvas.height = gridRef.current.scrollHeight
-    canvas.style.width = canvas.width + 'px'
-    canvas.style.height = canvas.height + 'px'
-    const images = svg.getElementsByTagName('image')
-    for (const image of images) {
-      let data = await fetch(image.getAttribute('xlink:href')).then((v) => {
-        return v.text()
-      })
-      data = encodeURIComponent(data)
-      image.removeAttribute('xlink:href')
-      image.setAttribute(
-        'href',
-        'data:image/svg+xml;base64,' + window.btoa(data)
-      )
-    }
-    const ctx = canvas.getContext('2d')
-    ctx.webkitImageSmoothingEnabled = true
-    ctx.msImageSmoothingEnabled = true
-    ctx.imageSmoothingEnabled = true
-    const pixelRatio = window.devicePixelRatio || 1
-    ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0)
-    return new Promise(resolve => {
-      if (type === 'SVG') {
-        const svgdata = new XMLSerializer().serializeToString(svg)
-        resolve('<?xml version="1.0" encoding="UTF-8"?>' + svgdata)
-        return
+    try {
+      const svg = document.querySelector('#divGrid > svg').cloneNode(true)
+
+      // Ensure xlink namespace is declared in the root SVG element
+      svg.setAttributeNS('http://www.w3.org/2000/xmlns/',
+        'xmlns:xlink',
+        'http://www.w3.org/1999/xlink')
+
+      svg.removeAttribute('style')
+      svg.setAttribute('width', gridRef.current.scrollWidth)
+      svg.setAttribute('height', gridRef.current.scrollHeight)
+
+      // Create a copy of the SVG for further processing if needed
+      const svgCopyForCanvg = svg.cloneNode(true)
+
+      const canvas = document.createElement('canvas')
+      canvas.width = gridRef.current.scrollWidth
+      canvas.height = gridRef.current.scrollHeight
+      canvas.style.width = canvas.width + 'px'
+      canvas.style.height = canvas.height + 'px'
+      const images = svgCopyForCanvg.getElementsByTagName('image')
+      for (const image of images) {
+        try {
+          const imageUrl = image.getAttribute('xlink:href')
+          if (imageUrl) {
+            let data = await fetch(imageUrl).then(v => v.text())
+            data = encodeURIComponent(data)
+            image.removeAttribute('xlink:href')
+            image.setAttributeNS('http://www.w3.org/1999/xlink',
+              'href',
+              'data:image/svg+xml;base64,' + window.btoa(data)
+            )
+          }
+        } catch (err) {
+          console.error('Error fetching image data:', err)
+          throw err
+        }
       }
-      const v = Canvg.fromString(ctx, svg.outerHTML)
-      v.render().then(() => {
-        let image = ''
-        if (type === 'JPG') {
-          const imgdata = ctx.getImageData(0, 0, canvas.width, canvas.height)
-          for (let i = 0; i < imgdata.data.length; i += 4) {
-            if (imgdata.data[i + 3] === 0) {
-              imgdata.data[i] = 255
-              imgdata.data[i + 1] = 255
-              imgdata.data[i + 2] = 255
-              imgdata.data[i + 3] = 255
+      const ctx = canvas.getContext('2d')
+      ctx.webkitImageSmoothingEnabled = true
+      ctx.msImageSmoothingEnabled = true
+      ctx.imageSmoothingEnabled = true
+      const pixelRatio = window.devicePixelRatio || 1
+      ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0)
+      return new Promise(resolve => {
+        if (type === 'SVG') {
+          const svgdata = new XMLSerializer().serializeToString(svg)
+          resolve('<?xml version="1.0" encoding="UTF-8"?>' + svgdata)
+          return
+        }
+        let svgString = svg.outerHTML
+        svgString = svgString.replace(/<hr>/g, '<hr />').replace(/<br>/g, '<br />')
+        const v = Canvg.fromString(ctx, svgString)
+        v.render().then(() => {
+          let image = ''
+          if (type === 'JPG') {
+            const imgdata = ctx.getImageData(0, 0, canvas.width, canvas.height)
+            for (let i = 0; i < imgdata.data.length; i += 4) {
+              if (imgdata.data[i + 3] === 0) {
+                imgdata.data[i] = 255
+                imgdata.data[i + 1] = 255
+                imgdata.data[i + 2] = 255
+                imgdata.data[i + 3] = 255
+              }
             }
-          }
-          ctx.putImageData(imgdata, 0, 0)
-          image = canvas.toDataURL('image/jpeg', 1.0)
-        } else {
-          if (type === 'PNG') {
+            ctx.putImageData(imgdata, 0, 0)
+            image = canvas.toDataURL('image/jpeg', 1.0)
+          } else if (type === 'PNG') {
             image = canvas.toDataURL('image/png')
           }
-        }
-        resolve(image)
+          resolve(image)
+        }).catch(err => {
+          console.error('Error rendering SVG with Canvg:', err)
+        })
       })
-    })
+    } catch (err) {
+      console.error('Error in exportImage function:', err)
+    }
   }
 
   // Download JPEG, PNG exported Image
@@ -281,6 +303,11 @@ export default function SchematicToolbar ({ mobileClose, gridRef }) {
         .then(res => {
           dispatch(saveSchematic(title, description, xml, res))
         })
+        .catch(err => {
+          // Debugging: Log if there is an error in exportImage
+          console.error('Error exporting image:', err)
+        })
+
       setMessage('Saved Successfully')
       handleSnacClick()
     }
diff --git a/blocks/eda-frontend/src/redux/actions/saveSchematicActions.js b/blocks/eda-frontend/src/redux/actions/saveSchematicActions.js
index 1595b971..0de75a85 100644
--- a/blocks/eda-frontend/src/redux/actions/saveSchematicActions.js
+++ b/blocks/eda-frontend/src/redux/actions/saveSchematicActions.js
@@ -71,7 +71,7 @@ export const saveSchematic = (title, description, xml, base64) => (dispatch, get
       .catch((err) => { console.error(err) })
   } else {
     // saving new schematic
-    api.post('save', queryString.stringify(body), config)
+    api.post('save/diagram', queryString.stringify(body), config)
       .then(
         (res) => {
           dispatch({
diff --git a/blocks/saveAPI/urls.py b/blocks/saveAPI/urls.py
index 5d5f3691..b306995a 100644
--- a/blocks/saveAPI/urls.py
+++ b/blocks/saveAPI/urls.py
@@ -3,24 +3,24 @@ from saveAPI import views as saveAPI_views
 from rest_framework.routers import DefaultRouter
 
 router = DefaultRouter()
-router.register(r'save/search', saveAPI_views.SaveSearchViewSet,
+router.register(r'search', saveAPI_views.SaveSearchViewSet,
                 basename='SaveSearch')
 
 urlpatterns = [
-    path('save', saveAPI_views.StateSaveView.as_view(),
+    path('diagram', saveAPI_views.StateSaveView.as_view(),
          name='saveState'),
 
-    path('save/list', saveAPI_views.UserSavesView.as_view(),
+    path('list', saveAPI_views.UserSavesView.as_view(),
          name='listSaves'),
 
-    path("save/gallery", saveAPI_views.GalleryView.as_view(),
+    path("gallery", saveAPI_views.GalleryView.as_view(),
          name="getGallery"),
 
-    path('save/gallery/<str:save_id>',
+    path('gallery/<str:save_id>',
          saveAPI_views.GalleryFetchSaveDeleteView.as_view(),
          name='fetchGallerySchematic'),
 
-    path("save/<uuid:save_id>", saveAPI_views.DeleteDiagram.as_view(),
+    path("<uuid:save_id>", saveAPI_views.DeleteDiagram.as_view(),
          name="deleteDiagram"),
 
 ]