fix: replace the cycling logic with the divide total space by number of candidates logic

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -80,15 +80,9 @@ 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;
+    // track the last drag target and drop zone to detect when they change
     let _lastDragTarget = null;
-    let _parentCycleList = [];
-    let _currentCycleIndex = 0;
-    let _currentDropZone = null;
-    let _currentIndicatorType = null;
+    let _lastDropZone = null;
 
     // initialized from config, defaults to true if not set
     let imageGallerySelected = config.imageGalleryState !== undefined ? config.imageGalleryState : true;
@@ -535,7 +529,8 @@ function RemoteFunctions(config = {}) {
             element.style.opacity = 1;
         }
         delete element._originalDragOpacity;
-        _stopParentCycling();
+        _lastDragTarget = null;
+        _lastDropZone = null;
     }
 
     /**
@@ -1275,26 +1270,108 @@ function RemoteFunctions(config = {}) {
     }
 
     /**
-     * Cycle to the next parent target and update drop markers
+     * this function decides which target should we select based on the list of the candidates
+     * so the total stable area (stable area: where marker remains consistent) will be divided by the no. of candidates
+     * and then based on the mouse pointer location we see which candidate is currently positioned and then return it
+     *
+     * @param {Element} initialTarget - the base element
+     * @param {Array<Element>} candidates - all the possible valid targets
+     * @param {number} clientX
+     * @param {number} clientY
+     * @param {string} indicatorType - "horizontal" or "vertical"
+     * @param {string} dropZone - "before", "after", or "inside"
+     * @returns {Element} - The selected target based on section
      */
-    function _cycleToNextParent() {
-        if (_parentCycleList.length <= 1) {
-            return;
+    function _selectTargetFromSection(initialTarget, candidates, clientX, clientY, indicatorType, dropZone) {
+        // when only one candidate is available or the drop zone is inside, we just return it
+        if (candidates.length === 1 || dropZone === 'inside') {
+            return candidates[0];
         }
 
-        _currentCycleIndex = (_currentCycleIndex + 1) % _parentCycleList.length;
-        const nextTarget = _parentCycleList[_currentCycleIndex];
+        const rect = initialTarget.getBoundingClientRect();
+        let relativePosition;
 
-        _currentIndicatorType = _getIndicatorType(nextTarget);
+        // for horz, we divide the height by n no. of candidates
+        if (indicatorType === "horizontal") {
+            const height = rect.height;
+            const stableAreaSize = height * 0.3; // 0.3 is the drop zone threshold
 
-        _clearDropMarkers();
-        _createDropMarker(nextTarget, _currentDropZone, _currentIndicatorType);
+            if (dropZone === "before") {
+                // for top arrow: stable area is top 30% of height
+                const stableAreaStart = rect.top;
+                relativePosition = (clientY - stableAreaStart) / stableAreaSize;
+            } else {
+                // for bottom arrow: stable area is bottom 30% of height
+                const stableAreaStart = rect.bottom - stableAreaSize;
+                relativePosition = (clientY - stableAreaStart) / stableAreaSize;
+            }
+        } else {
+            // for vertical, we divide the width by n
+            const width = rect.width;
+            const stableAreaSize = width * 0.3;
+
+            if (dropZone === "before") {
+                // left arrow: stable area is left 30% of width
+                const stableAreaStart = rect.left;
+                relativePosition = (clientX - stableAreaStart) / stableAreaSize;
+            } else {
+                // right arrow: stable area is right 30% of width
+                const stableAreaStart = rect.right - stableAreaSize;
+                relativePosition = (clientX - stableAreaStart) / stableAreaSize;
+            }
+        }
+
+
+        relativePosition = Math.max(0, Math.min(1, relativePosition));
+        // for "before" markers (top/left arrows), reverse the candidate order
+        // because innermost should be at bottom/right of stable area
+        let orderedCandidates = candidates;
+        if (dropZone === "before") {
+            orderedCandidates = [...candidates].reverse();
+        }
+
+        // find out which section the mouse is in
+        const sectionIndex = Math.floor(relativePosition * orderedCandidates.length);
+        // clamp the index to valid range (handles edge case where relativePosition = 1)
+        const clampedIndex = Math.min(sectionIndex, orderedCandidates.length - 1);
+
+        return orderedCandidates[clampedIndex];
+    }
+
+    /**
+     * this function gets the list of all the valid target candidates
+     * below are the 3 cases to satisfy to be a valid target candidate:
+     * - Same arrow type (indicator type)
+     * - 3 edges aligned based on drop zone
+     * - Semantic element
+     *
+     * @param {Element} initialTarget - base element
+     * @param {string} dropZone - "before", "after", or "inside"
+     * @param {string} indicatorType - "horizontal" or "vertical"
+     * @returns {Array<Element>} - list of valid candidates [initialTarget, ...validParents]
+     */
+    function _getValidTargetCandidates(initialTarget, dropZone, indicatorType) {
+        // for inside we don't need to check
+        if (dropZone === "inside") {
+            return [initialTarget];
+        }
+
+        const allParents = _getAllValidParentCandidates(initialTarget);
+
+        const validParents = allParents.filter(parent => {
+            if (!_isSemanticElement(parent)) {
+                return false;
+            }
+
+            const parentIndicatorType = _getIndicatorType(parent);
+            if (parentIndicatorType !== indicatorType) {
+                return false;
+            }
 
-        _lastDragTarget = nextTarget;
+            return _hasThreeEdgesAligned(initialTarget, parent, dropZone);
+        });
 
-        _dragHoverTimer = setTimeout(() => {
-            _cycleToNextParent();
-        }, 1000);
+        return [initialTarget, ...validParents];
     }
 
     /**
@@ -1342,67 +1419,6 @@ function RemoteFunctions(config = {}) {
         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
@@ -1525,42 +1541,27 @@ function RemoteFunctions(config = {}) {
 
         // Check if we should prefer a parent when all edges are aligned
         const bestParent = _findBestParentTarget(target);
-        if (bestParent) {
-            target = bestParent;
-        }
-
-        // 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;
+        const initialTarget = bestParent || target;
 
-        // 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);
+        // calc indicator type and drop zone for initial target
+        const indicatorType = _getIndicatorType(initialTarget);
+        const dropZone = _getDropZone(initialTarget, event.clientX, event.clientY, indicatorType, window._currentDraggedElement);
 
-        if (elementChanged || positionChanged) {
-            // reset as user moved to a new element or position changed significantly
-            _stopParentCycling();
+        // get the list of all the valid candidates for section selection
+        const candidates = _getValidTargetCandidates(initialTarget, dropZone, indicatorType);
 
-            _lastDragX = event.clientX;
-            _lastDragY = event.clientY;
-            _lastDragTarget = target;
+        // select the target based on mouse position within sections
+        const selectedTarget = _selectTargetFromSection(initialTarget, candidates, event.clientX, event.clientY, indicatorType, dropZone);
 
-            const indicatorType = _getIndicatorType(target);
-            const dropZone = _getDropZone(target, event.clientX, event.clientY, indicatorType, window._currentDraggedElement);
-
-            _currentIndicatorType = indicatorType;
-            _currentDropZone = dropZone;
+        // if the target or drop zone changes, then we can update
+        if (_lastDragTarget !== selectedTarget || _lastDropZone !== dropZone) {
+            _lastDragTarget = selectedTarget;
+            _lastDropZone = dropZone;
 
             if (!_isAutoScrolling) {
                 _clearDropMarkers();
-                _createDropMarker(target, dropZone, indicatorType);
+                _createDropMarker(selectedTarget, 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
@@ -1575,7 +1576,8 @@ function RemoteFunctions(config = {}) {
         if (!event.relatedTarget) {
             _clearDropMarkers();
             _stopAutoScroll();
-            _stopParentCycling();
+            _lastDragTarget = null;
+            _lastDropZone = null;
         }
     }
 
@@ -1617,7 +1619,6 @@ function RemoteFunctions(config = {}) {
 
         // 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);
@@ -1658,7 +1659,6 @@ function RemoteFunctions(config = {}) {
         // send message to the editor
         window._Brackets_MessageBroker.send(messageData);
 
-        _stopParentCycling();
         _clearDropMarkers();
         _stopAutoScroll();
         _dragEndChores(window._currentDraggedElement);