feat: move svg elements as a single unit

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -2138,8 +2138,19 @@ function RemoteFunctions(config = {}) {
 
             // we handle the svg elements differently as draggable attribute doesn't work on SVG namespace
             // so for svgs we add mouse related listeners and internally we call the drag related functions
+            // NOTE: we don't allow svg child elements dragging. we drag the whole svg element as a single unit
             if (this.element && this.element.namespaceURI === "http://www.w3.org/2000/svg") {
-                this.element.addEventListener("mousedown", (event) => { onDragMouseDown(event, this.element); });
+                let svgElement = this.element;
+                while(svgElement && svgElement.tagName.toLowerCase() !== 'svg') {
+                    if (svgElement.tagName.toLowerCase() === 'html' || svgElement.tagName.toLowerCase() === 'body') {
+                        return;
+                    }
+                    svgElement = svgElement.parentElement;
+                }
+                if (svgElement && svgElement.tagName.toLowerCase() === 'svg') {
+                    svgElement.addEventListener("mousedown", (event) => { onDragMouseDown(event, svgElement); });
+                }
+
             } else { // for normal elements
                 this.element.setAttribute("draggable", "true");
                 this.element.addEventListener("dragstart", (event) => { onDragStart(event, this.element); });