feat: svg elements drag drop feature

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -1529,6 +1529,26 @@ function RemoteFunctions(config = {}) {
         return null;
     }
 
+    function onDragStart(event, element) {
+        event.stopPropagation();
+        event.dataTransfer.setData("text/plain", element.getAttribute(GLOBALS.DATA_BRACKETS_ID_ATTR));
+        _dragStartChores(element);
+        _clearDropMarkers();
+        window._currentDraggedElement = element;
+        dismissUIAndCleanupState();
+        dismissImageRibbonGallery();
+        event.dataTransfer.effectAllowed = "move";
+    }
+
+    function onDragEnd(event, element) {
+        event.preventDefault();
+        event.stopPropagation();
+        _dragEndChores(element);
+        _clearDropMarkers();
+        _stopAutoScroll();
+        delete window._currentDraggedElement;
+    }
+
     /**
      * Handle dragover events on the document (throttled version)
      * Shows drop markers on valid drop targets
@@ -1689,6 +1709,39 @@ function RemoteFunctions(config = {}) {
         delete window._currentDraggedElement;
     }
 
+    /**
+     * this functions are mainly for handling SVG elements dragging
+     * as the draggable property doesn't work on them. so we add mousedown, mouseup, mousemove related listeners
+     * and internally we call the drag functions
+     */
+    function onDragMouseDown(event, element) {
+        event.preventDefault();
+        event.stopPropagation();
+
+        window._currentDraggedElement = element;
+        _dragStartChores(element);
+        _clearDropMarkers();
+        dismissUIAndCleanupState();
+        dismissImageRibbonGallery();
+
+        window._isDraggingSVG = true;
+    }
+
+    function onDragMouseUp(event) {
+        if (window._isDraggingSVG) {
+            event.preventDefault();
+            onDrop(event);
+            delete window._isDraggingSVG;
+        }
+    }
+
+    function onDragMouseMove(event) {
+        if (window._isDraggingSVG) {
+            event.preventDefault();
+            onDragOver(event);
+        }
+    }
+
     /**
      * this function is to check if an element should show the edit text option
      * it is needed because edit text option doesn't make sense with many elements like images, videos, hr tag etc
@@ -2082,28 +2135,16 @@ function RemoteFunctions(config = {}) {
             // disable dragging on all elements and then enable it on the current element
             const allElements = document.querySelectorAll(`[${GLOBALS.DATA_BRACKETS_ID_ATTR}]`);
             allElements.forEach(el => el.setAttribute("draggable", "false"));
-            this.element.setAttribute("draggable", "true");
 
-            this.element.addEventListener("dragstart", (event) => {
-                event.stopPropagation();
-                event.dataTransfer.setData("text/plain", this.element.getAttribute(GLOBALS.DATA_BRACKETS_ID_ATTR));
-                _dragStartChores(this.element);
-                _clearDropMarkers();
-                window._currentDraggedElement = this.element;
-                dismissUIAndCleanupState();
-                dismissImageRibbonGallery();
-                // Add drag image styling
-                event.dataTransfer.effectAllowed = "move";
-            });
-
-            this.element.addEventListener("dragend", (event) => {
-                event.preventDefault();
-                event.stopPropagation();
-                _dragEndChores(this.element);
-                _clearDropMarkers();
-                _stopAutoScroll();
-                delete window._currentDraggedElement;
-            });
+            // 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
+            if (this.element && this.element.namespaceURI === "http://www.w3.org/2000/svg") {
+                this.element.addEventListener("mousedown", (event) => { onDragMouseDown(event, this.element); });
+            } else { // for normal elements
+                this.element.setAttribute("draggable", "true");
+                this.element.addEventListener("dragstart", (event) => { onDragStart(event, this.element); });
+                this.element.addEventListener("dragend", (event) => { onDragEnd(event, this.element); });
+            }
         },
 
         _style: function() {
@@ -5805,6 +5846,8 @@ function RemoteFunctions(config = {}) {
         window.document.removeEventListener("drop", onDrop);
         window.document.removeEventListener("dragleave", onDragLeave);
         window.document.removeEventListener("keydown", onKeyDown);
+        window.document.removeEventListener("mousemove", onDragMouseMove);
+        window.document.removeEventListener("mouseup", onDragMouseUp);
         unregisterInteractionBlocker();
 
         if (config.mode === 'edit') {
@@ -5821,6 +5864,8 @@ function RemoteFunctions(config = {}) {
             window.document.addEventListener("drop", onDrop);
             window.document.addEventListener("dragleave", onDragLeave);
             window.document.addEventListener("keydown", onKeyDown);
+            window.document.addEventListener("mousemove", onDragMouseMove);
+            window.document.addEventListener("mouseup", onDragMouseUp);
 
             // this is to block all the interactions of the user created elements
             // so that lets say user created link doesn't redirect in edit mode