nice-ui/lib/utils/popup/AnchorPointHandle.js

React design system, components, and utilities

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AnchorPointHandle = void 0;
const updateAnchorPoint = (toggle, { gap = 4, off = 0, horizontal, center, topIf } = {}, anchor = { x: 0, y: 0, dx: 1, dy: 1 }) => {
    if (!toggle)
        return anchor;
    const { left: ex0, right: ex1, top: ey0, bottom: ey1 } = toggle.getBoundingClientRect();
    const sx0 = 0, sx1 = window.innerWidth, sy0 = 0, sy1 = window.innerHeight;
    const spaceToRight = sx1 - ex0;
    const spaceToLeft = ex1 - sx0;
    const spaceToBottom = sy1 - ey0;
    const spaceToTop = ey1 - sy0;
    if (horizontal) {
        if (spaceToRight > spaceToLeft) {
            anchor.x = ex1 + gap;
            anchor.dx = 1;
        }
        else {
            anchor.x = ex0 - gap;
            anchor.dx = -1;
        }
        if (center) {
            anchor.y = ey0 + (ey1 - ey0) * 0.5;
            anchor.dy = 0;
        }
        else {
            if (spaceToBottom > spaceToTop) {
                anchor.y = ey0 + off;
                anchor.dy = 1;
            }
            else {
                anchor.y = ey1 - off;
                anchor.dy = -1;
            }
        }
    }
    else {
        if (center) {
            anchor.x = ex0 + (ex1 - ex0) * 0.5;
            anchor.dx = 0;
        }
        else {
            if (spaceToRight > spaceToLeft) {
                anchor.x = ex0 + off;
                anchor.dx = 1;
            }
            else {
                anchor.x = ex1 - off;
                anchor.dx = -1;
            }
        }
        if (spaceToBottom <= spaceToTop || (topIf && topIf <= spaceToTop)) {
            anchor.y = ey0 - gap;
            anchor.dy = -1;
        }
        else {
            anchor.y = ey1 + gap;
            anchor.dy = 1;
        }
    }
    return anchor;
};
class AnchorPointHandle {
    constructor(spec = {}) {
        this.spec = spec;
        this.x = 0;
        this.y = 0;
        this.dx = 1;
        this.dy = 1;
        this.toggle = null;
        this.drop = null;
        this.ref = (toggle) => {
            this.toggle = toggle;
        };
        this.refDrop = (drop) => {
            this.drop = drop;
            if (drop)
                this.style();
        };
    }
    style() {
        updateAnchorPoint(this.toggle, this.spec, this);
        const style = {};
        const { x, y, dx, dy } = this;
        if (dx >= 0)
            style.left = x + 'px';
        else
            style.right = window.innerWidth - x + 'px';
        if (dy >= 0)
            style.top = y + 'px';
        else
            style.bottom = window.innerHeight - y + 'px';
        if (!dx || !dy)
            style.transform = 'translate(' + (dx ? 0 : '-50%') + ',' + (dy ? 0 : '-50%') + ')';
        const drop = this.drop;
        if (drop) {
            const s = drop.style;
            for (const key in style)
                s[key] = style[key];
        }
        return style;
    }
    get() {
        this.style();
        return this;
    }
    maxHeight() {
        const { pad = 8 } = this.spec;
        const { y, dy } = this;
        if (dy === 1)
            return window.innerHeight - y - pad;
        if (dy === -1)
            return y - pad;
        return window.innerHeight - pad - pad;
    }
}
exports.AnchorPointHandle = AnchorPointHandle;
AnchorPointHandle.fromPoint = (point) => {
    const handle = new AnchorPointHandle();
    handle.x = point.x;
    handle.y = point.y;
    handle.dx = point.dx;
    handle.dy = point.dy;
    return handle;
};