feat: reliable dragging using a cycle marker for all possible drop points

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -80,6 +80,16 @@ function RemoteFunctions(config = {}) {
     let _autoScrollTimer = null;
     let _isAutoScrolling = false; // to disable highlights when auto scrolling
 
+    // these variables are used when cycling between the possible drop locations
+    let _dragHoverTimer = null;
+    let _lastDragX = null;
+    let _lastDragY = null;
+    let _lastDragTarget = null;
+    let _parentCycleList = [];
+    let _currentCycleIndex = 0;
+    let _currentDropZone = null;
+    let _currentIndicatorType = null;
+
     // initialized from config, defaults to true if not set
     let imageGallerySelected = config.imageGalleryState !== undefined ? config.imageGalleryState : true;
 
@@ -137,6 +147,8 @@ function RemoteFunctions(config = {}) {
             _autoScrollTimer = setInterval(() => {
                 window.scrollBy(0, scrollDirection);
             }, 16); // 16 is ~60fps
+        } else {
+            _isAutoScrolling = false;
         }
     }
 
@@ -523,6 +535,7 @@ function RemoteFunctions(config = {}) {
             element.style.opacity = 1;
         }
         delete element._originalDragOpacity;
+        _stopParentCycling();
     }
 
     /**
@@ -1235,6 +1248,161 @@ function RemoteFunctions(config = {}) {
         }
     }
 
+    /**
+     * this function is responsible to get all the elements that could be the users possible drop targets
+     * @param {DOMElement} target - the ele to start with
+     * @returns {Array} - array of all the possible elements (closest -> farthest)
+     */
+    function _getAllValidParentCandidates(target) {
+        const parents = [];
+        let current = target.parentElement;
+
+        while (current) {
+            if (current.hasAttribute(GLOBALS.DATA_BRACKETS_ID_ATTR) && isElementEditable(current)) {
+                parents.push(current);
+            }
+
+            // need to stop at body or html
+            if (current.tagName.toLowerCase() === 'body' ||
+                current.tagName.toLowerCase() === 'html') {
+                break;
+            }
+
+            current = current.parentElement;
+        }
+
+        return parents;
+    }
+
+    /**
+     * Cycle to the next parent target and update drop markers
+     */
+    function _cycleToNextParent() {
+        if (_parentCycleList.length <= 1) {
+            return;
+        }
+
+        _currentCycleIndex = (_currentCycleIndex + 1) % _parentCycleList.length;
+        const nextTarget = _parentCycleList[_currentCycleIndex];
+
+        _currentIndicatorType = _getIndicatorType(nextTarget);
+
+        _clearDropMarkers();
+        _createDropMarker(nextTarget, _currentDropZone, _currentIndicatorType);
+
+        _lastDragTarget = nextTarget;
+
+        _dragHoverTimer = setTimeout(() => {
+            _cycleToNextParent();
+        }, 1000);
+    }
+
+    /**
+     * this function is to check whether an element is a semantic ele or not
+     * @param {DOMElement} element - the ele that we need to check
+     * @returns {Boolean} - true when its semantic otherwise false
+     */
+    function _isSemanticElement(element) {
+        const semanticTags = [
+            'div', 'section', 'article', 'aside', 'header', 'footer', 'main', 'nav',
+            'form', 'fieldset', 'details', 'figure', 'ul', 'ol', 'dl', 'table', 'tbody',
+            'thead', 'tfoot', 'tr', 'blockquote', 'pre', 'address'
+        ];
+        return semanticTags.includes(element.tagName.toLowerCase());
+    }
+
+    /**
+     * to check whether the 3 edges are aligned or not based on the drop zone
+     * for ex: if arrow marker is shown for the top, then top + left + right egde should align
+     * for bottom: bottom + left + right
+     * this means that there might be a possibility that the child element is blocking access of the parent ele
+     * @param {DOMElement} child
+     * @param {DOMElement} parent
+     * @param {String} dropZone - "before" or "after" (not called for "inside")
+     * @returns {Boolean} - true if matches
+     */
+    function _hasThreeEdgesAligned(child, parent, dropZone) {
+        const tolerance = 2; // 2px tolerance
+        const childRect = child.getBoundingClientRect();
+        const parentRect = parent.getBoundingClientRect();
+
+        const topAligned = Math.abs(childRect.top - parentRect.top) <= tolerance;
+        const bottomAligned = Math.abs(childRect.bottom - parentRect.bottom) <= tolerance;
+        const leftAligned = Math.abs(childRect.left - parentRect.left) <= tolerance;
+        const rightAligned = Math.abs(childRect.right - parentRect.right) <= tolerance;
+
+        // For "before" drops (top), check: top + left + right (bottom doesn't matter)
+        // For "after" drops (bottom), check: bottom + left + right (top doesn't matter)
+        if (dropZone === "before") {
+            return topAligned && leftAligned && rightAligned;
+        } else if (dropZone === "after") {
+            return bottomAligned && leftAligned && rightAligned;
+        }
+
+        return false;
+    }
+
+    /**
+     * start the parent cycling timer, only to go it when parent has a genuine possibility of being the drop target
+     * 3 cases we check to say if parent might be a possibility:
+     * (same arrow type, correct 3 edges aligned, semantic parent)
+     *
+     * @param {DOMElement} initialTarget - The element user is hovering over
+     */
+    function _startParentCycling(initialTarget) {
+        // no cycling when drop zone is inside
+        if (_currentDropZone === "inside") {
+            return;
+        }
+
+        const initialIndicatorType = _currentIndicatorType;
+        const allParents = _getAllValidParentCandidates(initialTarget);
+
+        // (same arrow type, correct 3 edges aligned, semantic parent)
+        // all this cases should match for it to be a valid parent
+        const validParents = allParents.filter(parent => {
+            if (!_isSemanticElement(parent)) {
+                return false;
+            }
+
+            // make sure parent has the same indicator type
+            const parentIndicatorType = _getIndicatorType(parent);
+            if (parentIndicatorType !== initialIndicatorType) {
+                return false;
+            }
+
+            // the correct 3 edges should align
+            return _hasThreeEdgesAligned(initialTarget, parent, _currentDropZone);
+        });
+
+        _parentCycleList = [initialTarget, ...validParents];
+        if (_parentCycleList.length <= 1) {
+            return;
+        }
+
+        _currentCycleIndex = 0;
+        _dragHoverTimer = setTimeout(() => {
+            _cycleToNextParent();
+        }, 1000);
+    }
+
+    /**
+     * Stop parent cycling and clean up state
+     */
+    function _stopParentCycling() {
+        if (_dragHoverTimer) {
+            clearTimeout(_dragHoverTimer);
+            _dragHoverTimer = null;
+        }
+        _parentCycleList = [];
+        _currentCycleIndex = 0;
+        _lastDragX = null;
+        _lastDragY = null;
+        _lastDragTarget = null;
+        _currentDropZone = null;
+        _currentIndicatorType = null;
+    }
+
     /**
      * this function is for finding the best target element on where to drop the dragged element
      * for ex: div > image...here both the div and image are of the exact same size, then when user is dragging some
@@ -1361,27 +1529,41 @@ function RemoteFunctions(config = {}) {
             target = bestParent;
         }
 
-        // Store original styles before modifying them
-        if (target._originalDragBackgroundColor === undefined) {
-            target._originalDragBackgroundColor = target.style.backgroundColor;
-        }
-        if (target._originalDragTransition === undefined) {
-            target._originalDragTransition = target.style.transition;
-        }
+        // check if cursor position changed significantly (>5px threshold to avoid jitter)
+        const positionChanged = _lastDragX === null || _lastDragY === null ||
+                               Math.abs(_lastDragX - event.clientX) > 5 ||
+                               Math.abs(_lastDragY - event.clientY) > 5;
 
-        // Add subtle hover effect to target element
-        target.style.backgroundColor = "rgba(66, 133, 244, 0.22)";
-        target.style.transition = "background-color 0.2s ease";
+        // check if we moved to a different target element
+        // during cycling, ignore element detection to prevent reset loop
+        const elementChanged = (_parentCycleList.length === 0) && (_lastDragTarget !== target);
 
-        // Determine indicator type and drop zone based on container layout and cursor position
-        const indicatorType = _getIndicatorType(target);
-        const dropZone = _getDropZone(
-            target, event.clientX, event.clientY, indicatorType, window._currentDraggedElement
-        );
+        if (elementChanged || positionChanged) {
+            // reset as user moved to a new element or position changed significantly
+            _stopParentCycling();
 
-        // before creating a drop marker, make sure that we clear all the drop markers
-        _clearDropMarkers();
-        _createDropMarker(target, dropZone, indicatorType);
+            _lastDragX = event.clientX;
+            _lastDragY = event.clientY;
+            _lastDragTarget = target;
+
+            const indicatorType = _getIndicatorType(target);
+            const dropZone = _getDropZone(target, event.clientX, event.clientY, indicatorType, window._currentDraggedElement);
+
+            _currentIndicatorType = indicatorType;
+            _currentDropZone = dropZone;
+
+            if (!_isAutoScrolling) {
+                _clearDropMarkers();
+                _createDropMarker(target, dropZone, indicatorType);
+            }
+
+            _startParentCycling(target);
+        } else if (_dragHoverTimer === null && !_isAutoScrolling) {
+            // hovering in same spot but timer was cleared, so restart it
+            _startParentCycling(target);
+        }
+
+        // Handle auto-scroll
         _handleAutoScroll(event.clientY);
     }
 
@@ -1393,6 +1575,7 @@ function RemoteFunctions(config = {}) {
         if (!event.relatedTarget) {
             _clearDropMarkers();
             _stopAutoScroll();
+            _stopParentCycling();
         }
     }
 
@@ -1409,21 +1592,32 @@ function RemoteFunctions(config = {}) {
         event.preventDefault();
         event.stopPropagation();
 
-        // get the element under the cursor
-        let target = document.elementFromPoint(event.clientX, event.clientY);
+        let target = _lastDragTarget;
 
-        // get the closest editable element
-        while (target && !target.hasAttribute(GLOBALS.DATA_BRACKETS_ID_ATTR)) {
-            target = target.parentElement;
-        }
+        if (!target) {
+            // get the element under the cursor
+            target = document.elementFromPoint(event.clientX, event.clientY);
 
-        if (!isElementEditable(target) || target === window._currentDraggedElement) {
-            // if direct detection fails, we try to find a nearby valid target
-            target = _findNearestValidTarget(event.clientX, event.clientY);
+            // get the closest editable element
+            while (target && !target.hasAttribute(GLOBALS.DATA_BRACKETS_ID_ATTR)) {
+                target = target.parentElement;
+            }
+
+            if (!isElementEditable(target) || target === window._currentDraggedElement) {
+                // if direct detection fails, we try to find a nearby valid target
+                target = _findNearestValidTarget(event.clientX, event.clientY);
+            }
+
+            // Check if we should prefer a parent when all edges are aligned
+            const bestParent = _findBestParentTarget(target);
+            if (bestParent) {
+                target = bestParent;
+            }
         }
 
         // skip if no valid target found or if it's the dragged element
         if (!isElementEditable(target) || target === window._currentDraggedElement) {
+            _stopParentCycling();
             _clearDropMarkers();
             _stopAutoScroll();
             _dragEndChores(window._currentDraggedElement);
@@ -1432,12 +1626,6 @@ function RemoteFunctions(config = {}) {
             return;
         }
 
-        // Check if we should prefer a parent when all edges are aligned
-        const bestParent = _findBestParentTarget(target);
-        if (bestParent) {
-            target = bestParent;
-        }
-
         // Determine drop position based on container layout and cursor position
         const indicatorType = _getIndicatorType(target);
         const dropZone = _getDropZone(
@@ -1470,6 +1658,7 @@ function RemoteFunctions(config = {}) {
         // send message to the editor
         window._Brackets_MessageBroker.send(messageData);
 
+        _stopParentCycling();
         _clearDropMarkers();
         _stopAutoScroll();
         _dragEndChores(window._currentDraggedElement);