From 9fd33539cedadd31b8e73065eaed49deb657cb74 Mon Sep 17 00:00:00 2001 From: Rohit Date: Thu, 17 Jul 2025 18:21:11 +0530 Subject: [PATCH] feat: get truly deepest element --- src/helpers/clientSelectorGenerator.ts | 96 ++++++++++++-------------- 1 file changed, 46 insertions(+), 50 deletions(-) diff --git a/src/helpers/clientSelectorGenerator.ts b/src/helpers/clientSelectorGenerator.ts index fcd56984..9e48c59e 100644 --- a/src/helpers/clientSelectorGenerator.ts +++ b/src/helpers/clientSelectorGenerator.ts @@ -4080,67 +4080,63 @@ class ClientSelectorGenerator { } private getDeepestElementFromPoint( - elements: HTMLElement[], - x: number, - y: number - ): HTMLElement | null { - if (!elements.length) return null; + elements: HTMLElement[], + x: number, + y: number +): HTMLElement | null { + if (!elements.length) return null; - const visited = new Set(); - return this.findDeepestElementRecursive(elements, x, y, visited); - } + const visited = new Set(); + return this.findTrulyDeepestElement(elements, x, y, visited); +} - private findDeepestElementRecursive( - elements: HTMLElement[], - x: number, - y: number, - visited: Set - ): HTMLElement | null { - if (!elements.length) return null; +private findTrulyDeepestElement( + elements: HTMLElement[], + x: number, + y: number, + visited: Set +): HTMLElement | null { + let deepestElement: HTMLElement | null = null; + let maxDepth = -1; - for (const element of elements) { - if (visited.has(element)) continue; - visited.add(element); + for (const element of elements) { + if (visited.has(element)) continue; + visited.add(element); - if (element.shadowRoot) { - let shadowElements = element.shadowRoot.elementsFromPoint( - x, - y - ) as HTMLElement[]; - - if (shadowElements.length > 0) { - let deepestShadowElement = shadowElements[0]; - - if (deepestShadowElement.shadowRoot) { - const evenDeeperElement = this.findDeepestElementRecursive( - [deepestShadowElement], - x, - y, - visited - ); - if (evenDeeperElement) { - return evenDeeperElement; - } - } - - return deepestShadowElement; + if (element.shadowRoot) { + const shadowElements = element.shadowRoot.elementsFromPoint(x, y) as HTMLElement[]; + const deeper = this.findTrulyDeepestElement(shadowElements, x, y, visited); + if (deeper) { + const depth = this.getElementDepth(deeper); + if (depth > maxDepth) { + maxDepth = depth; + deepestElement = deeper; } } } - return elements[0]; + const depth = this.getElementDepth(element); + if (depth > maxDepth) { + maxDepth = depth; + deepestElement = element; + } } - private getElementDepth(element: HTMLElement): number { - let depth = 0; - let current = element; - while (current && current !== this.lastAnalyzedDocument?.body) { - depth++; - current = current.parentElement as HTMLElement; - if (depth > 50) break; - } - return depth; + return deepestElement; +} + +private getElementDepth(element: HTMLElement): number { + let depth = 0; + let current: HTMLElement | null = element; + + while (current && current !== this.lastAnalyzedDocument?.body) { + depth++; + current = current.parentElement || (current.getRootNode() as ShadowRoot).host as HTMLElement | null; + if (depth > 50) break; } + return depth; +} + /** * Clean up when component unmounts or mode changes