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)`;
}