From 638df11ec2a39e668d2ddb8c77ef542cf2404617 Mon Sep 17 00:00:00 2001
From: agriyadev5 <agriya.dev5@agriya.in>
Date: Tue, 6 Jul 2021 13:00:55 +0530
Subject: [PATCH] #546 ungrouping issue fixed

---
 src/svgcanvas/selected-elem.js | 11 +++++++----
 src/svgcanvas/svg-exec.js      | 22 ++++++++++++++++++++++
 2 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/src/svgcanvas/selected-elem.js b/src/svgcanvas/selected-elem.js
index 0fe11266..9b5014dd 100644
--- a/src/svgcanvas/selected-elem.js
+++ b/src/svgcanvas/selected-elem.js
@@ -571,16 +571,19 @@ export const pushGroupProperty = function (g, undoable) {
           // Clone the group's filter
           gfilter = drawing.copyElem(gfilter);
           findDefs().append(gfilter);
+
+          // const filterElem = getRefElem(gfilter);
+          const blurElem = getFeGaussianBlur(gfilter);
+          // Change this in future for different filters
+          const suffix = (blurElem?.tagName === 'feGaussianBlur') ? 'blur' : 'filter';
+          gfilter.id = elem.id + '_' + suffix;
+          elementContext_.changeSelectedAttribute('filter', 'url(#' + gfilter.id + ')', [ elem ]);
         }
       } else {
         gfilter = getRefElem(elem.getAttribute('filter'));
       }
       // const filterElem = getRefElem(gfilter);
       const blurElem = getFeGaussianBlur(gfilter);
-      // Change this in future for different filters
-      const suffix = (blurElem?.tagName === 'feGaussianBlur') ? 'blur' : 'filter';
-      gfilter.id = elem.id + '_' + suffix;
-      elementContext_.changeSelectedAttribute('filter', 'url(#' + gfilter.id + ')', [ elem ]);
 
       // Update blur value
       if (cblur) {
diff --git a/src/svgcanvas/svg-exec.js b/src/svgcanvas/svg-exec.js
index 3052deb3..3d75c42c 100644
--- a/src/svgcanvas/svg-exec.js
+++ b/src/svgcanvas/svg-exec.js
@@ -368,6 +368,28 @@ export const setSvgString = function (xmlString, preventUndo) {
         svgCanvas.embedImage(val);
       }
     });
+    // Duplicate id replace changes
+    const nodes = content.querySelectorAll('[id]');
+    const ids = {};
+    const totalNodes = nodes.length;
+
+    for(let i=0; i<totalNodes; i++) {
+      const currentId = nodes[i].id ? nodes[i].id : "undefined";
+      if(isNaN(ids[currentId])) {
+        ids[currentId] = 0;
+      }
+      ids[currentId]++;
+    }
+
+    Object.entries(ids).forEach(([ key, value ]) => {
+      if (value > 1) {
+        const nodes = content.querySelectorAll('[id="'+key+'"]');
+        for(let i=1; i<nodes.length; i++) {
+          nodes[i].setAttribute('id', svgCanvas.getNextId());
+        }
+      }
+    });
+
 
     // Wrap child SVGs in group elements
     const svgElements = content.querySelectorAll('svg');