@thoughtspot/visual-embed-sdk 1.48.0 → 1.49.1

package/src/utils.spec.ts

@@ -18,6 +18,9 @@ import {
     getTypeFromValue,
     arrayIncludesString,
     calculateVisibleElementData,
+    getClippingAncestors,
+    getEffectiveClippingAncestors,
+    getScrollableAncestors,
     formatTemplate,
     isValidCssMargin,
     resetValueFromWindow,
@@ -519,7 +522,7 @@ describe('calculateVisibleElementData', () => {
             height: 200,
         } as DOMRect);
 
-        const result = calculateVisibleElementData(mockElement);
+        const result = calculateVisibleElementData(mockElement, true);
 
         expect(result).toEqual({
             top: 0, // Not clipped from top
@@ -529,6 +532,15 @@ describe('calculateVisibleElementData', () => {
         });
     });
 
+    it('should return zero dimensions when element is missing', () => {
+        expect(calculateVisibleElementData(null as unknown as HTMLElement)).toEqual({
+            top: 0,
+            height: 0,
+            left: 0,
+            width: 0,
+        });
+    });
+
     it('should calculate data for element clipped from top', () => {
         // Mock getBoundingClientRect for element partially above viewport
         jest.spyOn(mockElement, 'getBoundingClientRect').mockReturnValue({
@@ -540,7 +552,7 @@ describe('calculateVisibleElementData', () => {
             height: 200,
         } as DOMRect);
 
-        const result = calculateVisibleElementData(mockElement);
+        const result = calculateVisibleElementData(mockElement, true);
 
         expect(result).toEqual({
             top: 50, // Clipped 50px from top
@@ -561,7 +573,7 @@ describe('calculateVisibleElementData', () => {
             height: 200,
         } as DOMRect);
 
-        const result = calculateVisibleElementData(mockElement);
+        const result = calculateVisibleElementData(mockElement, true);
 
         expect(result).toEqual({
             top: 0, // Not clipped from top
@@ -582,7 +594,7 @@ describe('calculateVisibleElementData', () => {
             height: 350,
         } as DOMRect);
 
-        const result = calculateVisibleElementData(mockElement);
+        const result = calculateVisibleElementData(mockElement, true);
 
         expect(result).toEqual({
             top: 0, // Not clipped from top
@@ -717,6 +729,190 @@ describe('calculateVisibleElementData', () => {
             width: 1200, // Full viewport width
         });
     });
+
+    it('should calculate data clipped by a scrollable parent', () => {
+        const scrollContainer = document.createElement('div');
+        scrollContainer.style.overflow = 'auto';
+        scrollContainer.appendChild(mockElement);
+
+        jest.spyOn(scrollContainer, 'getBoundingClientRect').mockReturnValue({
+            top: 100,
+            left: 50,
+            bottom: 600,
+            right: 650,
+            width: 600,
+            height: 500,
+        } as DOMRect);
+
+        jest.spyOn(mockElement, 'getBoundingClientRect').mockReturnValue({
+            top: -100,
+            left: 50,
+            bottom: 900,
+            right: 650,
+            width: 600,
+            height: 1000,
+        } as DOMRect);
+
+        const result = calculateVisibleElementData(mockElement, true);
+
+        expect(result).toEqual({
+            top: 200,
+            height: 500,
+            left: 0,
+            width: 600,
+        });
+    });
+
+    it('should calculate data clipped by a non-scroll clipping parent', () => {
+        const clippingContainer = document.createElement('div');
+        clippingContainer.style.overflow = 'hidden';
+        clippingContainer.appendChild(mockElement);
+
+        jest.spyOn(clippingContainer, 'getBoundingClientRect').mockReturnValue({
+            top: 100,
+            left: 100,
+            bottom: 500,
+            right: 500,
+            width: 400,
+            height: 400,
+        } as DOMRect);
+
+        jest.spyOn(mockElement, 'getBoundingClientRect').mockReturnValue({
+            top: 50,
+            left: 50,
+            bottom: 700,
+            right: 700,
+            width: 650,
+            height: 650,
+        } as DOMRect);
+
+        const result = calculateVisibleElementData(mockElement, true);
+
+        expect(result).toEqual({
+            top: 50,
+            height: 400,
+            left: 50,
+            width: 400,
+        });
+    });
+});
+
+describe('getScrollableAncestors', () => {
+    it('should return an empty list when element is missing', () => {
+        expect(getScrollableAncestors(null as unknown as HTMLElement)).toEqual([]);
+    });
+
+    it('should find scrollable ancestors inside a shadow root', () => {
+        const host = document.createElement('div');
+        document.body.appendChild(host);
+
+        const shadow = host.attachShadow({ mode: 'open' });
+        const scrollContainer = document.createElement('div');
+        scrollContainer.style.overflow = 'auto';
+        const embedTarget = document.createElement('div');
+        const iframe = document.createElement('iframe');
+
+        shadow.appendChild(scrollContainer);
+        scrollContainer.appendChild(embedTarget);
+        embedTarget.appendChild(iframe);
+
+        expect(getScrollableAncestors(iframe)).toEqual([scrollContainer]);
+
+        host.remove();
+    });
+
+    it('should ignore ancestors when computed style is unavailable', () => {
+        const parent = document.createElement('div');
+        const iframe = document.createElement('iframe');
+        parent.appendChild(iframe);
+
+        const getComputedStyleSpy = jest
+            .spyOn(window, 'getComputedStyle')
+            .mockReturnValue(null as unknown as CSSStyleDeclaration);
+
+        expect(getScrollableAncestors(iframe)).toEqual([]);
+
+        getComputedStyleSpy.mockRestore();
+    });
+});
+
+describe('getClippingAncestors', () => {
+    it('should return an empty list when element is missing', () => {
+        expect(getClippingAncestors(null as unknown as HTMLElement)).toEqual([]);
+    });
+
+    it('should include scrollable and non-scroll clipping ancestors', () => {
+        const scrollContainer = document.createElement('div');
+        scrollContainer.style.overflow = 'auto';
+        const clippingContainer = document.createElement('div');
+        clippingContainer.style.overflow = 'hidden';
+        const iframe = document.createElement('iframe');
+
+        scrollContainer.appendChild(clippingContainer);
+        clippingContainer.appendChild(iframe);
+
+        expect(getClippingAncestors(iframe)).toEqual([clippingContainer, scrollContainer]);
+    });
+});
+
+describe('getEffectiveClippingAncestors', () => {
+    it('should return an empty list when element is missing', () => {
+        expect(getEffectiveClippingAncestors(null as unknown as HTMLElement)).toEqual([]);
+    });
+
+    it('should ignore overflow ancestors that do not clip the element', () => {
+        const clippingContainer = document.createElement('div');
+        clippingContainer.style.overflow = 'hidden';
+        const iframe = document.createElement('iframe');
+
+        clippingContainer.appendChild(iframe);
+
+        jest.spyOn(clippingContainer, 'getBoundingClientRect').mockReturnValue({
+            top: 100,
+            left: 100,
+            bottom: 700,
+            right: 700,
+            width: 600,
+            height: 600,
+        } as DOMRect);
+        jest.spyOn(iframe, 'getBoundingClientRect').mockReturnValue({
+            top: 200,
+            left: 200,
+            bottom: 400,
+            right: 400,
+            width: 200,
+            height: 200,
+        } as DOMRect);
+
+        expect(getEffectiveClippingAncestors(iframe)).toEqual([]);
+    });
+
+    it('should include overflow ancestors that clip the element', () => {
+        const clippingContainer = document.createElement('div');
+        clippingContainer.style.overflow = 'hidden';
+        const iframe = document.createElement('iframe');
+
+        clippingContainer.appendChild(iframe);
+
+        jest.spyOn(clippingContainer, 'getBoundingClientRect').mockReturnValue({
+            top: 100,
+            left: 100,
+            bottom: 500,
+            right: 500,
+            width: 400,
+            height: 400,
+        } as DOMRect);
+        jest.spyOn(iframe, 'getBoundingClientRect').mockReturnValue({
+            top: 50,
+            left: 50,
+            bottom: 700,
+            right: 700,
+            width: 650,
+            height: 650,
+        } as DOMRect);
+
+        expect(getEffectiveClippingAncestors(iframe)).toEqual([clippingContainer]);
+    });
 });
 
 describe('formatTemplate', () => {

package/src/utils.ts

@@ -518,22 +518,141 @@ export const handleExitPresentMode = async (): Promise<void> => {
     logger.warn('Exit fullscreen API is not supported by this browser.');
 };
 
-export const calculateVisibleElementData = (element: HTMLElement) => {
+const scrollableOverflowPattern = /(auto|scroll|overlay)/;
+const clippingOverflowPattern = /(auto|scroll|overlay|hidden|clip)/;
+
+const getParentElementAcrossShadowRoot = (element: HTMLElement): HTMLElement | null => {
+    if (element.parentElement) {
+        return element.parentElement;
+    }
+
+    const rootNode = element.getRootNode?.();
+    if (typeof ShadowRoot !== 'undefined' && rootNode instanceof ShadowRoot) {
+        return rootNode.host as HTMLElement;
+    }
+
+    return null;
+};
+
+const hasMatchingOverflow = (element: HTMLElement, overflowPattern: RegExp) => {
+    const style = window.getComputedStyle(element);
+    return style ? overflowPattern.test(style.overflow + style.overflowX + style.overflowY) : false;
+};
+
+export const getScrollableAncestors = (element: HTMLElement) => {
+    const ancestors: HTMLElement[] = [];
+    if (!element) {
+        return ancestors;
+    }
+    let parent = getParentElementAcrossShadowRoot(element);
+
+    while (parent && parent !== document.body && parent !== document.documentElement) {
+        if (hasMatchingOverflow(parent, scrollableOverflowPattern)) {
+            ancestors.push(parent);
+        }
+        parent = getParentElementAcrossShadowRoot(parent);
+    }
+
+    return ancestors;
+};
+
+export const getClippingAncestors = (element: HTMLElement) => {
+    const ancestors: HTMLElement[] = [];
+    if (!element) {
+        return ancestors;
+    }
+    let parent = getParentElementAcrossShadowRoot(element);
+
+    while (parent && parent !== document.body && parent !== document.documentElement) {
+        if (hasMatchingOverflow(parent, clippingOverflowPattern)) {
+            ancestors.push(parent);
+        }
+        parent = getParentElementAcrossShadowRoot(parent);
+    }
+
+    return ancestors;
+};
+
+const getIntersectedRect = (
+    rect: Pick<DOMRect, 'top' | 'left' | 'bottom' | 'right'>,
+    clipRect: Pick<DOMRect, 'top' | 'left' | 'bottom' | 'right'>,
+) => ({
+    top: Math.max(rect.top, clipRect.top),
+    left: Math.max(rect.left, clipRect.left),
+    bottom: Math.min(rect.bottom, clipRect.bottom),
+    right: Math.min(rect.right, clipRect.right),
+});
+
+const isSameVisibleRect = (
+    rectA: ReturnType<typeof getIntersectedRect>,
+    rectB: ReturnType<typeof getIntersectedRect>,
+) => rectA.top === rectB.top
+    && rectA.left === rectB.left
+    && rectA.bottom === rectB.bottom
+    && rectA.right === rectB.right;
+
+export const getEffectiveClippingAncestors = (element: HTMLElement) => {
+    if (!element) {
+        return [];
+    }
+
+    const elementRect = element.getBoundingClientRect();
+    let clipRect = {
+        top: 0,
+        left: 0,
+        bottom: window.innerHeight,
+        right: window.innerWidth,
+    };
+
+    return getClippingAncestors(element).filter((ancestor) => {
+        const currentVisibleRect = getIntersectedRect(elementRect, clipRect);
+        const nextClipRect = getIntersectedRect(clipRect, ancestor.getBoundingClientRect());
+        const nextVisibleRect = getIntersectedRect(elementRect, nextClipRect);
+        const clipsElement = !isSameVisibleRect(currentVisibleRect, nextVisibleRect);
+        clipRect = nextClipRect;
+        return clipsElement;
+    });
+};
+
+export const calculateVisibleElementData = (
+    element: HTMLElement,
+    useClippingAncestors = false,
+) => {
+     if (!element) {
+        return {
+            top: 0,
+            height: 0,
+            left: 0,
+            width: 0,
+        };
+    }
     const rect = element.getBoundingClientRect();
 
-    const windowHeight = window.innerHeight;
-    const windowWidth = window.innerWidth;
+    let clipTop = 0;
+    let clipLeft = 0;
+    let clipBottom = window.innerHeight;
+    let clipRight = window.innerWidth;
+
+    if (useClippingAncestors) {
+        getEffectiveClippingAncestors(element).forEach((ancestor) => {
+            const ancestorRect = ancestor.getBoundingClientRect();
+            clipTop = Math.max(clipTop, ancestorRect.top);
+            clipLeft = Math.max(clipLeft, ancestorRect.left);
+            clipBottom = Math.min(clipBottom, ancestorRect.bottom);
+            clipRight = Math.min(clipRight, ancestorRect.right);
+        });
+    }
 
-    const frameRelativeTop = Math.max(rect.top, 0);
-    const frameRelativeLeft = Math.max(rect.left, 0);
+    const frameRelativeTop = Math.max(rect.top, clipTop);
+    const frameRelativeLeft = Math.max(rect.left, clipLeft);
 
-    const frameRelativeBottom = Math.min(windowHeight, rect.bottom);
-    const frameRelativeRight = Math.min(windowWidth, rect.right);
+    const frameRelativeBottom = Math.min(clipBottom, rect.bottom);
+    const frameRelativeRight = Math.min(clipRight, rect.right);
 
     const data = {
-        top: Math.max(0, rect.top * -1),
+        top: Math.max(0, clipTop - rect.top),
         height: Math.max(0, frameRelativeBottom - frameRelativeTop),
-        left: Math.max(0, rect.left * -1),
+        left: Math.max(0, clipLeft - rect.left),
         width: Math.max(0, frameRelativeRight - frameRelativeLeft),
     };