@arcgis/map-components
Version:
ArcGIS Map Components
124 lines (123 loc) • 5.11 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { html as u } from "lit";
import { when as s, watch as r } from "@arcgis/core/core/reactiveUtils.js";
import { GenericController as h, useDirection as c, makeGenericController as a } from "@arcgis/lumina/controllers";
import { getSlotAssignedElements as m } from "@arcgis/toolkit/dom";
import { createRef as f } from "lit/directives/ref.js";
import { c as d, S as E } from "./slots.js";
import { createEvent as l } from "@arcgis/lumina";
class C extends h {
//#endregion
//#region Lifecycle
constructor(o) {
super(o), this.direction = c(), this.popupRef = f(), this.slotGroupRefs = d(), this.attributionHeight = 0, this._uiContainer = null, this.component.listen("arcgisViewClick", (t) => {
const e = t.detail.native;
t.detail.button !== 0 || e?.ctrlKey || e?.metaKey || this._handleOpenPopup(t.detail);
}), this.component.listenOn(globalThis, "unhandledrejection", (t) => {
const e = t.reason;
if (e?.name === "webgl:required") {
const { name: i } = e;
this.webGLError = { name: i };
}
});
}
//#endregion
//#region Private Methods
hostLifecycle() {
return [
s(() => this.component.view.ready, () => {
this._assignDefaultPopup();
}),
// Close component popup when view popup is opened
s(() => this.component.view.popup?.visible, () => {
this.popupElement?.open && (this.popupElement.open = !1);
})
];
}
async openPopup(o) {
if (this._assignDefaultPopup(), this.closePopup(), this.popupElement) {
await this.popupElement.componentOnReady(), this.popupElement.open = !0;
const { fetchFeatures: t, shouldFocus: e, title: i, ...n } = o;
delete o.fetchFeatures, Object.assign(this.popupElement, n), i !== void 0 && (this.popupElement.heading = i), e && await this.popupElement.setFocus(), t && this.popupElement.fetchFeatures();
} else
await this.component.view.openPopup(o);
}
closePopup() {
this.popupElement && (this.popupElement.open = !1), this.component.view.closePopup();
}
_assignDefaultPopup() {
this.popupRef.value && !this.popupElement && (this.popupElement = this.popupRef.value, this.popupElement.referenceElement = this.component.el, this.popupElement.view = this.component.view);
}
handleAttributionHeightChange(o) {
if (!(this.attributionHeight === o || !this.component.el.shadowRoot)) {
if (this.attributionHeight = o, !this._uiContainer) {
const t = this.component.el.shadowRoot.querySelector(".arcgis-map-container-ui");
this._uiContainer = t;
}
this._uiContainer?.style.setProperty("--arcgis-internal-attribution-space-top", `${this.attributionHeight}px`);
}
}
_maybeDisableViewPopup() {
this.component.view && (this.component.popupComponentEnabled || this.popupElement) && (this.previousViewPopupEnabled = this.component.view.popupEnabled, this.component.view.popupEnabled = !1);
}
_maybeResetViewPopup() {
this.component.view && this.previousViewPopupEnabled !== void 0 && (this.component.view.popupEnabled = this.previousViewPopupEnabled, this.previousViewPopupEnabled = void 0);
}
async _handleOpenPopup(o) {
if (this._assignDefaultPopup(), !this.component.popupDisabled) {
if (this._maybeDisableViewPopup(), this.popupElement) {
const { location: t, promises: e } = await this.popupElement?.handleViewClick(o) ?? {};
e?.length ? this.openPopup({ location: t, promises: e }) : this.popupElement?.open && this.closePopup();
}
this._maybeResetViewPopup();
}
}
_handlePopupSlotChange(o) {
const t = m(o.target, "arcgis-popup");
!this.popupElement && t.length ? this.popupElement = t[0] : t.length || (this.popupElement = void 0);
}
_webGLErrorAlert() {
return this.webGLError ? u`<arcgis-webgl-error .errorName=${this.webGLError.name}></arcgis-webgl-error>` : null;
}
//#endregion
//#region Rendering
render() {
return E({ direction: this.direction, popupComponentEnabled: this.component.popupComponentEnabled, slotGroupRefs: this.slotGroupRefs, handlePopupSlotChange: (o) => this._handlePopupSlotChange(o), webGLErrorElement: this._webGLErrorAlert(), popupElement: this.popupRef });
}
}
const R = a((p, o) => {
const t = l();
return o.onLifecycle(
() => r(
() => {
const { map: e } = p;
if (!e || e.destroyed)
return [];
const i = [];
return e.loadError && i.push(e), e.basemap?.loadError && i.push(e.basemap), e.ground.loadError && i.push(e.ground), [...e.allLayers, ...e.allTables].forEach((n) => {
n.loadError && i.push(n);
}), i;
},
(e) => {
e.length && (p.loadErrorSources = e, t.emit());
}
)
), t;
}), G = a(
(p, o) => {
const t = l();
return o.onLifecycle(
() => r(
() => p.view?.readyState,
(e) => {
(e === "map-content-error" || e === "rendering-error") && t.emit();
}
)
), t;
}
);
export {
C as U,
G as a,
R as u
};