public update()

in src/component/popup/popup/Popup.ts [285:394]


    public update(renderCamera: RenderCamera, size: ViewportSize, transform: Transform): void {
        if (!this._parentContainer || !this._content) {
            return;
        }

        if (!this._point && !this._rect) {
            return;
        }

        if (!this._container) {
            this._container = this._dom.createElement("div", "mapillary-popup", this._parentContainer);

            const showTip: boolean =
                this._options.clean !== true &&
                this._options.float !== Alignment.Center;

            if (showTip) {
                const tipClassName: string =
                    "mapillary-popup-tip" +
                    (this._options.capturePointer === true ? " mapillary-popup-capture-pointer" : "");

                this._tip = this._dom.createElement("div", tipClassName, this._container);
                this._dom.createElement("div", "mapillary-popup-tip-inner", this._tip);
            }

            this._container.appendChild(this._content);
            this._parentContainer.appendChild(this._container);

            if (this._options.opacity != null) {
                this._container.style.opacity = this._options.opacity.toString();
            }
        }

        let pointPixel: number[] = null;
        let position: PopupAlignment = this._alignmentToPopupAligment(this._options.position);
        let float: PopupAlignment = this._alignmentToPopupAligment(this._options.float);

        const classList: DOMTokenList = this._container.classList;

        if (this._point != null) {
            pointPixel =
                this._viewportCoords.basicToCanvasSafe(
                    this._point[0],
                    this._point[1],
                    { offsetHeight: size.height, offsetWidth: size.width },
                    transform,
                    renderCamera.perspective);
        } else {
            const alignments: PopupAlignment[] =
                ["center", "top", "bottom", "left", "right", "top-left", "top-right", "bottom-left", "bottom-right"];

            let appliedPosition: PopupAlignment = null;
            for (const alignment of alignments) {
                if (classList.contains(`mapillary-popup-float-${alignment}`)) {
                    appliedPosition = alignment;
                    break;
                }
            }

            [pointPixel, position] = this._rectToPixel(this._rect, position, appliedPosition, renderCamera, size, transform);

            if (!float) {
                float = position;
            }
        }

        if (pointPixel == null) {
            this._container.style.display = "none";
            return;
        }

        this._container.style.display = "";

        if (!float) {
            const width: number = this._container.offsetWidth;
            const height: number = this._container.offsetHeight;
            const floats: PopupAlignment[] = this._pixelToFloats(pointPixel, size, width, height);

            float = floats.length === 0 ? "top" : <PopupAlignment>floats.join("-");
        }

        const offset: { [key in PopupAlignment]: number[] } = this._normalizeOffset(this._options.offset);

        pointPixel = [pointPixel[0] + offset[float][0], pointPixel[1] + offset[float][1]];
        pointPixel = [Math.round(pointPixel[0]), Math.round(pointPixel[1])];

        const floatTranslate: { [key in PopupAlignment]: string } = {
            "bottom": "translate(-50%,0)",
            "bottom-left": "translate(-100%,0)",
            "bottom-right": "translate(0,0)",
            "center": "translate(-50%,-50%)",
            "left": "translate(-100%,-50%)",
            "right": "translate(0,-50%)",
            "top": "translate(-50%,-100%)",
            "top-left": "translate(-100%,-100%)",
            "top-right": "translate(0,-100%)",
        };

        for (const key in floatTranslate) {
            if (!floatTranslate.hasOwnProperty(key)) {
                continue;
            }

            classList.remove(`mapillary-popup-float-${key}`);
        }

        classList.add(`mapillary-popup-float-${float}`);

        this._container.style.transform = `${floatTranslate[float]} translate(${pointPixel[0]}px,${pointPixel[1]}px)`;
    }