@rcsb/rcsb-saguaro/lib/RcsbFv/RcsbFvTooltip/RcsbFvTooltipManager.js

RCSB 1D Feature Viewer

import { __awaiter } from "tslib";
import { computePosition, detectOverflow } from "@floating-ui/dom";
export class RcsbFvTooltipManager {
    constructor(boardId, tooltip) {
        this.boardId = boardId;
        this.tooltip = tooltip;
        const refDiv = document.querySelector("#" + this.boardId);
        if (refDiv == null)
            throw "Main board DOM element not found";
        this.refDiv = refDiv;
        const tooltipDiv = document.querySelector("#" + this.boardId + "_tooltip" /* RcsbFvDOMConstants.TOOLTIP_DOM_ID_PREFIX */);
        if (tooltipDiv == null)
            throw "Tooltip DOM element not found";
        this.tooltipDiv = tooltipDiv;
        const tooltipDescriptionDiv = document.querySelector("#" + this.boardId + "_tooltipDescription" /* RcsbFvDOMConstants.TOOLTIP_DESCRIPTION_DOM_ID_PREFIX */);
        if (tooltipDescriptionDiv == null)
            throw "Tooltip DOM element not found";
        this.tooltipDescriptionDiv = tooltipDescriptionDiv;
        Object.assign(this.tooltipDiv.style, {
            position: 'absolute',
            visibility: 'hidden',
            whiteSpace: 'nowrap',
            top: '0',
            left: '0',
        });
        Object.assign(this.tooltipDescriptionDiv.style, {
            position: 'absolute',
            visibility: 'hidden',
            whiteSpace: 'nowrap',
            top: '0',
            left: '0',
        });
    }
    showTooltip(d) {
        this.tooltipDiv.textContent = "";
        const divTooltip = this.tooltip.showTooltip(d);
        if (!divTooltip)
            return;
        this.tooltipDiv.append(divTooltip);
        computePosition(this.refDiv, this.tooltipDiv, {
            placement: 'top-end',
            middleware: [{
                    name: 'middleware',
                    fn(middlewareArguments) {
                        return __awaiter(this, void 0, void 0, function* () {
                            const overflow = yield detectOverflow(middlewareArguments, {
                                rootBoundary: "viewport"
                            });
                            if (overflow.top > 0)
                                return { y: overflow.top + middlewareArguments.y };
                            return {};
                        });
                    },
                }]
        }).then((o) => {
            Object.assign(this.tooltipDiv.style, {
                left: `${o.x}px`,
                top: `${o.y}px`,
                visibility: 'visible'
            });
        });
    }
    showTooltipDescription(d) {
        var _a, _b;
        this.tooltipDescriptionDiv.textContent = "";
        this.tooltipDescriptionDiv.style.visibility = "hidden";
        const description = (_b = (_a = this.tooltip).showTooltipDescription) === null || _b === void 0 ? void 0 : _b.call(_a, d);
        if (!description)
            return;
        this.tooltipDescriptionDiv.append(description);
        computePosition(this.refDiv, this.tooltipDescriptionDiv, {
            placement: 'top-end',
            middleware: [{
                    name: 'middleware',
                    fn(middlewareArguments) {
                        return __awaiter(this, void 0, void 0, function* () {
                            const overflow = yield detectOverflow(middlewareArguments, {
                                rootBoundary: "viewport"
                            });
                            if (overflow.top > 0)
                                return { y: overflow.top + middlewareArguments.y };
                            return {};
                        });
                    },
                }]
        }).then(({ x, y }) => {
            Object.assign(this.tooltipDescriptionDiv.style, {
                left: `${x}px`,
                top: `${y - 30}px`,
                visibility: 'visible'
            });
        });
    }
    hideTooltip() {
        this.tooltipDiv.innerHTML = "";
        this.tooltipDiv.style.visibility = "hidden";
        this.tooltipDescriptionDiv.innerHTML = "";
        this.tooltipDescriptionDiv.style.visibility = "hidden";
    }
}