@syncfusion/react-popups/src/common/collision.js

A package of Pure React popup components such as Tooltip that is used to display information or messages in separate pop-ups.

import { calculatePosition } from './position';
export const flip = (elementRef, targetRef, offsetX, offsetY, positionX, positionY, viewPortElementRef, axis) => {
    if (elementRef === null || targetRef === null) {
        return null;
    }
    const target = targetRef;
    if (!target) {
        return null;
    }
    const element = elementRef;
    const viewPortElement = viewPortElementRef ?? null;
    const position = calculatePosition(targetRef, positionX, positionY);
    position.left += offsetX;
    position.top += offsetY;
    const elementRect = element.getBoundingClientRect();
    const targetRect = target.getBoundingClientRect();
    if (axis.X) {
        if (positionX === 'left' &&
            elementRect.right > (viewPortElement?.clientWidth || window.innerWidth)) {
            position.left = targetRect.left - elementRect.width - offsetX;
            positionX = 'right';
        }
        else if (positionX === 'right' && elementRect.left < 0) {
            position.left = targetRect.right + offsetX;
            positionX = 'left';
        }
    }
    if (axis.Y) {
        if (positionY === 'top' &&
            elementRect.bottom > (viewPortElement?.clientHeight || window.innerHeight)) {
            position.top = targetRect.top - elementRect.height - offsetY;
            positionY = 'bottom';
        }
        else if (positionY === 'bottom' && elementRect.top < 0) {
            position.top = targetRect.bottom + offsetY;
            positionY = 'top';
        }
    }
    return position;
};
export const fit = (element, viewPortElement, axis, position) => {
    if (element === null) {
        return null;
    }
    if (!position) {
        return null;
    }
    const elementRect = element.getBoundingClientRect();
    const viewPortRect = viewPortElement?.getBoundingClientRect() || {
        top: 0,
        left: 0,
        right: window.innerWidth,
        bottom: window.innerHeight
    };
    let { left, top } = position;
    if (axis?.X) {
        if (left + elementRect.width > viewPortRect.right) {
            left = viewPortRect.right - elementRect.width;
        }
        if (left < viewPortRect.left) {
            left = viewPortRect.left;
        }
    }
    if (axis?.Y) {
        if (top + elementRect.height > viewPortRect.bottom) {
            top = viewPortRect.bottom - elementRect.height;
        }
        if (top < viewPortRect.top) {
            top = viewPortRect.top;
        }
    }
    return { left, top };
};
export const isCollide = (element, viewPortElement, x, y) => {
    if (!element) {
        return [];
    }
    const targetContainer = viewPortElement;
    const parentDocument = element.ownerDocument;
    const elementRect = element.getBoundingClientRect();
    const left = x ? x : elementRect.left;
    const top = y ? y : elementRect.top;
    const right = left + elementRect.width;
    const bottom = top + elementRect.height;
    const scrollLeft = parentDocument?.documentElement.scrollLeft || parentDocument?.body.scrollLeft || 0;
    const scrollTop = parentDocument?.documentElement.scrollTop || parentDocument?.body.scrollTop || 0;
    const containerRect = targetContainer?.getBoundingClientRect() || { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight };
    const containerLeft = containerRect.left;
    const containerRight = scrollLeft + containerRect.left + containerRect.width;
    const containerTop = containerRect.top;
    const containerBottom = scrollTop + containerRect.top + containerRect.height;
    return [
        top - scrollTop < containerTop ? 'top' : '',
        right > containerRight ? 'right' : '',
        left - scrollLeft < containerLeft ? 'left' : '',
        bottom > containerBottom ? 'bottom' : ''
    ].filter(Boolean);
};
export const getTransformElement = (element) => {
    if (element === null) {
        return null;
    }
    let currentElement = element;
    while (currentElement && currentElement !== document.body) {
        const style = window.getComputedStyle(currentElement);
        if (style.transform !== 'none' || parseFloat(style.zoom) !== 1) {
            return currentElement;
        }
        currentElement = currentElement.parentElement;
    }
    return null;
};
export const getZoomValue = (element) => {
    if (element === null) {
        return 1;
    }
    const style = window.getComputedStyle(element);
    return parseFloat(style.zoom) || 1;
};