fix: svg elements drag-drop not ending on escape key press

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -4561,6 +4561,44 @@ function RemoteFunctions(config = {}) {
         window.document.removeEventListener("mousemove", onMouseMove);
     }
 
+    /**
+     * This function is to end the svg drag drop when escape key is pressed if its currently active
+     * note: onMouseOut normally handles when a drop operation completes for svg elements
+     * but for escape key handling (cancelling the drag-drop) onMouseOut will not work as it expects the event param,
+     * but since the escape key handler is handled in phoenix-pro/main.js, so we cannot pass any events from there.
+     * that's the reason we need this function
+     *
+     * Also this is only for svgs as normal HTML elements uses draggable attribute and drag listeners
+     * so browsers automatically handle the escape key
+     */
+    function cancelSVGDragIfActive() {
+        // check if any element is being dragged
+        if (!window._isDraggingSVG || !window._currentDraggedElement) {
+            return;
+        }
+
+        // clear the last highlighted element's background
+        if (_lastDragTarget) {
+            if (_lastDragTarget._originalDragBackgroundColor !== undefined) {
+                _lastDragTarget.style.backgroundColor = _lastDragTarget._originalDragBackgroundColor;
+                delete _lastDragTarget._originalDragBackgroundColor;
+            }
+            if (_lastDragTarget._originalDragOutline !== undefined) {
+                _lastDragTarget.style.outline = _lastDragTarget._originalDragOutline;
+                delete _lastDragTarget._originalDragOutline;
+            }
+        }
+
+        // revert everything back
+        _clearDropMarkers();
+        _stopAutoScroll();
+        _dragEndChores(window._currentDraggedElement);
+        delete window._currentDraggedElement;
+        delete window._isDraggingSVG;
+        _lastDragTarget = null;
+        _lastDropZone = null;
+    }
+
     // helper function to get the current elements highlight mode
     // this is as per user settings (either click or hover)
     function getHighlightMode() {
@@ -5922,6 +5960,7 @@ function RemoteFunctions(config = {}) {
         "finishEditing"         : finishEditing,
         "dismissUIAndCleanupState" : dismissUIAndCleanupState,
         "handleDownloadEvent" : handleDownloadEvent,
-        "showToastMessage" : showToastMessage
+        "showToastMessage" : showToastMessage,
+        "cancelSVGDragIfActive" : cancelSVGDragIfActive
     };
 }

src/extensionsIntegrated/phoenix-pro/browser-context/remote-utils.js

@@ -3,11 +3,12 @@
  * Proprietary code, all rights reserved.
  */
 
-/*global customReturns, enableHoverListeners, dismissUIAndCleanupState*/
+/*global customReturns, enableHoverListeners, dismissUIAndCleanupState, cancelSVGDragIfActive */
 
 function dismissLivePreviewEditBoxes() {
     enableHoverListeners(); // so that if hover lock is there it will get cleared
     dismissUIAndCleanupState();
+    cancelSVGDragIfActive(); // read this function's jsdoc to understand why its here
 }
 
 customReturns.dismissLivePreviewEditBoxes = dismissLivePreviewEditBoxes;