fix: ruler lines not getting updated unless when clicked element changes

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -5032,6 +5032,28 @@ function RemoteFunctions(config = {}) {
         _editHandler.apply(edits);
     }
 
+    /**
+     * Handle ruler lines visibility toggle when config changes
+     * @param {Object} oldConfig - the prev config state
+     */
+    function _handleRulerLinesConfigChange(oldConfig) {
+        const rulerLinesChanged = oldConfig.showRulerLines !== config.showRulerLines;
+        if (rulerLinesChanged && previouslyClickedElement) {
+            if (config.showRulerLines) {
+                // if user turned it on: create ruler lines for the element
+                if (!_currentRulerLines) {
+                    _currentRulerLines = new RulerLines(previouslyClickedElement);
+                }
+            } else {
+                // if user turned it off: remove the lines
+                if (_currentRulerLines) {
+                    _currentRulerLines.remove();
+                    _currentRulerLines = null;
+                }
+            }
+        }
+    }
+
     function updateConfig(newConfig) {
         const oldConfig = config;
         config = JSON.parse(newConfig);
@@ -5041,6 +5063,9 @@ function RemoteFunctions(config = {}) {
             imageGallerySelected = config.imageGalleryState;
         }
 
+        // handle ruler lines visibility toggle
+        _handleRulerLinesConfigChange(oldConfig);
+
         // Determine if configuration has changed significantly
         const oldHighlightMode = oldConfig.elemHighlights ? oldConfig.elemHighlights.toLowerCase() : "hover";
         const newHighlightMode = getHighlightMode();