From f5b9b31fad98fc6aa027e6fcd80ed22a3cebb1ca Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Tue, 3 Sep 2024 10:57:43 +0530
Subject: [PATCH] feat: allow selection of only child elements in case of
 getList

---
 src/components/organisms/BrowserWindow.tsx | 27 +++++++++++++++++-----
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/components/organisms/BrowserWindow.tsx b/src/components/organisms/BrowserWindow.tsx
index 4ff3ecb9..45a4c2d8 100644
--- a/src/components/organisms/BrowserWindow.tsx
+++ b/src/components/organisms/BrowserWindow.tsx
@@ -50,7 +50,7 @@ const getAttributeOptions = (tagName: string, elementInfo: ElementInfo | null):
 export const BrowserWindow = () => {
     const [canvasRef, setCanvasReference] = useState<React.RefObject<HTMLCanvasElement> | undefined>(undefined);
     const [screenShot, setScreenShot] = useState<string>("");
-    const [highlighterData, setHighlighterData] = useState<{ rect: DOMRect, selector: string, elementInfo: ElementInfo | null, childSelectors?: string } | null>(null);
+    const [highlighterData, setHighlighterData] = useState<{ rect: DOMRect, selector: string, elementInfo: ElementInfo | null, childSelectors?: string[] } | null>(null);
     const [showAttributeModal, setShowAttributeModal] = useState(false);
     const [attributeOptions, setAttributeOptions] = useState<AttributeOption[]>([]);
     const [selectedElement, setSelectedElement] = useState<{ selector: string, info: ElementInfo | null } | null>(null);
@@ -97,17 +97,25 @@ export const BrowserWindow = () => {
         }
     }, [screenShot, canvasRef, socket, screencastHandler]);
 
-    const highlighterHandler = useCallback((data: { rect: DOMRect, selector: string, elementInfo: ElementInfo | null, childSelectors?: string }) => {
+    const highlighterHandler = useCallback((data: { rect: DOMRect, selector: string, elementInfo: ElementInfo | null, childSelectors?: string[] }) => {
         if (getList === true) {
             socket?.emit('setGetList', { getList: true });
-
+    
             if (listSelector) {
                 socket?.emit('listSelector', { selector: listSelector });
+    
+                if (data.childSelectors && data.childSelectors.includes(data.selector)) {
+                    setHighlighterData(data);
+                } else {
+                    setHighlighterData(null); // Clear highlighter if not a valid child selector
+                }
+            } else {
+                setHighlighterData(data);
             }
-
+        } else {
+            setHighlighterData(data);
         }
-        setHighlighterData(data);
-    }, [highlighterData, getList, socket]);
+    }, [highlighterData, getList, socket, listSelector]);
 
     useEffect(() => {
         document.addEventListener('mousemove', onMouseMove, false);
@@ -133,6 +141,13 @@ export const BrowserWindow = () => {
                 clickY >= highlightRect.top &&
                 clickY <= highlightRect.bottom
             ) {
+                 // Check if the selected element is one of the childSelectors (if applicable)
+            if (highlighterData.childSelectors && highlighterData.childSelectors.length > 0) {
+                if (!highlighterData.childSelectors.includes(highlighterData.selector)) {
+                    return; 
+                }
+            }
+
                 const options = getAttributeOptions(highlighterData.elementInfo?.tagName || '', highlighterData.elementInfo);
 
                 if (isSelectingPagination) {