public/index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
    <link rel="icon" href="data:,">
    <title>popover-helper</title>
    <link href="./style.css" rel="stylesheet" />
    <!--inject:start-->
    <script src="../dist/popover-helper.js"></script>
    <!--inject:end-->
</head>
<body>
    <h3>popover settings:</h3>
    <div>
        border color:
        <input type="text" value="#ccc" class="popover-border-color" />
        bg color:
        <input type="text" value="#fff" class="popover-bg-color" />
        color:
        <input type="text" value="#000" class="popover-color" />
        arrow size:
        <input type="number" step="1" min="0" value="10" class="popover-arrow-size" />
    </div>

    <div>
        positions: 
        <span class="positions"></span>
    </div>
    
    <div class="container">
        <div class="target">target (move me)</div>
    </div>
    <div class="popover">
        <div class="popover-content">popover content popover content popover content 
            popover content popover content popover content 
            popover content popover content popover content 
            popover content popover content popover content 
            popover content popover content popover content 
            popover content popover content popover content 
            popover content popover content popover content 
        </div>
    </div>

    <div>
        <button class="random">random target</button>
    </div>

    <h3>size settings:</h3>
    <div>
        popover width/height:
        <input type="text" value="300px" class="popover-width" size="10" />
        x
        <input type="text" value="200px" class="popover-height" size="10" />
    </div>
    <div>
        container width/height:
        <input type="text" value="800px" class="container-width" size="10" />
        x
        <input type="text" value="600px" class="container-height" size="10" />
    </div>
    <div>
        target width/height:
        <input type="text" value="120px" class="target-width" size="10" />
        x
        <input type="text" value="30px" class="target-height" size="10" />
    </div>
    <div>
        target rect:
        <select class="target-rect">
            <option></option>
            <option>x: 100, y: 100, width: 0, height: 0</option>
            <option>x: 100, y: 100, width: 100, height: 30</option>
            <option>x: 200, y: 100, width: 200, height: 100</option>
            <option>x: "mouseX", y: "mouseY", width: 0, height: 0</option>
            <option>x: "mouseX", y: "mouseY", width: 100, height: 30</option>
            <option>x: "mouseX", y: "mouseY", width: 200, height: 100</option>
        </select>
    </div>

    <div class="fps-detector"></div>

   <script>
    const {
        getRect, getDefaultPositions, getBestPosition, getPositionStyle
    } = window['popover-helper'];

    // ===========================================================================================
    const pos = localStorage.getItem('popover-positions') || '';
    let positions = pos.split(',');

    // all positions
    const $positions = document.querySelector('.positions');
    const defaultPositions = getDefaultPositions();

    defaultPositions.forEach((item) => {
        const label = document.createElement('label');
        const input = document.createElement('input');
        input.className = 'position';
        input.setAttribute('type', 'checkbox');
        input.setAttribute('value', item);
        if (positions.includes(item)) {
            input.setAttribute('checked', 'checked');
        }
        label.appendChild(input);
        const span = document.createElement('span');
        span.innerText = item;
    
        label.appendChild(span);
        $positions.appendChild(label);
    });

    const updatePositions = () => {
        positions = [];
        Array.from(document.querySelectorAll('.position')).forEach((elem) => {
            if (elem.checked) {
                positions.push(elem.value);
            }
        });
        // console.log(positions);
        localStorage.setItem('popover-positions', positions.join(','));
    };
    updatePositions();

    $positions.addEventListener('click', () => {
        updatePositions();
        update();
    });

    // ===========================================================================================

    const $container = document.querySelector('.container');
    const $target = document.querySelector('.target');

    const $popover = document.querySelector('.popover');
    let positionInfo;

    let virtualTargetRect;

    // const log = (name, time) => {
    //     if (time > 0.5) {
    //         console.log(name, time);
    //     }
    // };

    const update = () => {

        const bgColor = $popover.style.getPropertyValue('--popover-bg-color');
        const borderColor = $popover.style.getPropertyValue('--popover-border-color');
        const arrowSize = $popover.style.getPropertyValue('--popover-arrow-size');

        // let start_time = performance.now();

        // get 3 rect for calculation
        const containerRect = getRect('.container');
        const targetRect = getRect(virtualTargetRect || '.target');
        const popoverRect = getRect('.popover');

        // log('get rect', performance.now() - start_time);
        // start_time = performance.now();
    
        // console.log(positions);

        positionInfo = getBestPosition(
            containerRect,
            targetRect,
            popoverRect,
            // allowed positions
            positions,
            // previous position info
            positionInfo
        );

        // log('getBestPosition', performance.now() - start_time);
        // start_time = performance.now();

        // console.log(positionInfo.changed);
        if (positionInfo.changed) {
            $popover.style.left = `${positionInfo.left}px`;
            $popover.style.top = `${positionInfo.top}px`;
            // log('style top/left', performance.now() - start_time);
            // start_time = performance.now();
        }
    
        const style = getPositionStyle(positionInfo, {
            bgColor,
            borderColor,
            arrowSize: parseInt(arrowSize)
        });

        // log('getPositionStyle', performance.now() - start_time);
        // start_time = performance.now();

        // console.log(style.changed);
        // performance optimized
        if (style.changed) {
            $popover.style.background = style.background;
            // log('background', performance.now() - start_time);
        }
    };

    // ===========================================================================================
    const moveInfo = {
        mx: 0,
        my: 0,
        tx: 0,
        ty: 0
    };

    const updateTarget = (x, y) => {
        if (x) {
            localStorage.setItem('target-x', x);
        } else {
            x = localStorage.getItem('target-x');
        }
        if (y) {
            localStorage.setItem('target-y', y);
        } else {
            y = localStorage.getItem('target-y');
        }
        $target.style.left = `${x}px`;
        $target.style.top = `${y}px`;
    };

    updateTarget();

    const mousemoveHandler = (e) => {
        e.preventDefault();
        const x = e.pageX - moveInfo.mx + moveInfo.tx;
        const y = e.pageY - moveInfo.my + moveInfo.ty;
        // console.log(x, y);
        updateTarget(x, y);
        update();
    };
    
    const mouseupHandler = (e) => {
        document.removeEventListener('mousemove', mousemoveHandler);
        document.removeEventListener('mouseup', mouseupHandler);
    };

    $target.addEventListener('mousedown', (e) => {
        moveInfo.mx = e.pageX;
        moveInfo.my = e.pageY;
        moveInfo.tx = e.target.offsetLeft;
        moveInfo.ty = e.target.offsetTop;

        // console.log(moveInfo);

        document.addEventListener('mousemove', mousemoveHandler);
        document.addEventListener('mouseup', mouseupHandler);
    });

    let $virtualTarget;
    const updateVirtualTarget = () => {
        if (!virtualTargetRect) {
            if ($virtualTarget) {
                $virtualTarget.remove();
                $virtualTarget = null;
            }
            return;
        }

        if (!$virtualTarget) {
            $virtualTarget = document.createElement('div');
            $virtualTarget.className = 'virtual-target';
            document.body.appendChild($virtualTarget);
        }

        $virtualTarget.style.left = `${virtualTargetRect.x}px`;
        $virtualTarget.style.top = `${virtualTargetRect.y}px`;
        $virtualTarget.style.width = `${virtualTargetRect.width}px`;
        $virtualTarget.style.height = `${virtualTargetRect.height}px`;

    };

    const virtualMouseMoveHandler = (e) => {
        virtualTargetRect.x = e.pageX;
        virtualTargetRect.y = e.pageY;
        updateVirtualTarget();
        update();
    };

    const virtualTargetHandler = (v) => {
        if (!v) {
            document.removeEventListener('mousemove', virtualMouseMoveHandler);
            virtualTargetRect = null;
            updateVirtualTarget();
            update();
            return;
        }
        virtualTargetRect = new Function(`return {${v}}`)();
        console.log('virtualTargetRect', virtualTargetRect);

        if (virtualTargetRect.x === 'mouseX') {
            document.addEventListener('mousemove', virtualMouseMoveHandler);
        } else {
            document.removeEventListener('mousemove', virtualMouseMoveHandler);
            updateVirtualTarget();
            update();
        }

    };

    const $targetRect = document.querySelector('.target-rect');
    $targetRect.addEventListener('change', (e) => {
        virtualTargetHandler(e.target.value);
    });

    // ===========================================================================================
    
    // bind
    const controls = [
        'popover-border-color',
        'popover-bg-color',
        'popover-color',
        'popover-arrow-size',
        'popover-width',
        'popover-height',
        'container-width',
        'container-height',
        'target-width',
        'target-height'
    ];
    controls.forEach((id) => {
        const $elem = document.querySelector(`.${id}`);

        const doms = {
            popover: $popover,
            container: $container,
            target: $target
        };

        const $dom = doms[id.split('-').shift()];

        const value = localStorage.getItem(id);
        if (value) {
            $elem.value = value;
            $dom.style.setProperty(`--${id}`, value);
        }

        $elem.addEventListener('change', (e) => {

            const v = e.target.value;
            localStorage.setItem(id, v);
            $dom.style.setProperty(`--${id}`, v);

            update();
        });
    });

    // ===========================================================================================

    const randomPosition = () => {
        const x = Math.round(Math.random() * ($container.offsetWidth - $target.offsetWidth));
        const y = Math.round(Math.random() * ($container.offsetHeight - $target.offsetHeight));
        updateTarget(x, y);
    };

    update();

    document.querySelector('.random').addEventListener('click', () => {
        randomPosition();
        update();
    });

    window.onload = () => {
        const FPSDetector = window['fps-detector'].FPSDetector;
        new FPSDetector('.fps-detector');
    };
    
   </script>
   <script src="https://cdn.jsdelivr.net/npm/fps-detector@latest/dist/fps-detector.js"></script>
</body>
</html>