@arcgis/map-components
Version:
ArcGIS Map Components
300 lines (299 loc) • 9.98 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as p } from "../../chunks/runtime.js";
import { css as g, html as _ } from "lit";
import { LitElement as y } from "@arcgis/lumina";
import { t as m } from "../../chunks/async-utils.js";
import { property as c, subclass as f } from "/core/core/accessorSupport/decorators.js";
import * as u from "@arcgis/toolkit/log";
import w from "@arcgis/core/core/Accessor.js";
import "@arcgis/core/views/MapView.js";
import v from "@arcgis/core/geometry/SpatialReference.js";
import { watch as d } from "@arcgis/core/core/reactiveUtils.js";
import { rotateDimensions as L, registerPanConstraint as C } from "@arcgis/core/applications/Components/OrientedImageryViewer/ImageViewer/utils.js";
import R from "@arcgis/core/layers/support/TileInfo.js";
import { u as M } from "../../chunks/useT9n.js";
import "@arcgis/core/Graphic.js";
import G from "@arcgis/core/layers/GraphicsLayer.js";
import { GenericController as b } from "@arcgis/lumina/controllers";
import { createRef as P, ref as I } from "lit/directives/ref.js";
const x = g`:host{height:100%;--arcgis-view-color-focus: none}`;
var z = Object.defineProperty, O = Object.getOwnPropertyDescriptor, h = (r, e, i, t) => {
for (var a = t > 1 ? void 0 : t ? O(e, i) : e, s = r.length - 1, o; s >= 0; s--)
(o = r[s]) && (a = (t ? o(e, i, a) : o(a)) || a);
return t && a && z(e, i, a), a;
};
let n = class extends w {
//--------------------------------------------------------------------------
//
// Lifecycle
//
//--------------------------------------------------------------------------
constructor(r) {
super(r), this.autoLoad = !1;
}
static isNonPanoramicMedia(r) {
return !!r && typeof r == "object" && "declaredClass" in r && typeof r.declaredClass == "string" && r.declaredClass === "components.oriented-imagery-viewer.support.NonPanoramicMedia";
}
destroy() {
this._cache?.destroy(), this._cache = void 0;
}
get layer() {
return this._cache;
}
get size() {
if (!this._cache || this._cache.destroyed || this._cache.loadError || !this._cache.serviceRasterInfo)
return;
const { serviceRasterInfo: r } = this._cache;
return [r.width, r.height];
}
//---------------------------------------------------------------------------
//
// Public Methods
//
//---------------------------------------------------------------------------
async load(r) {
if (this._cache && !this._cache.destroyed)
return await this._cache.load(r), { layer: this._cache, size: this.size };
const { url: e, customParameters: i } = this;
let t = this.datasetFormat;
if (!e)
throw new Error("URL is required to load NonPanoramicMedia.");
if (!t) {
const o = await import("../../chunks/urlUtils.js");
if (m(r), t = o.guessExtensionFromURI(e), !t) {
try {
t = await o.getDatasetFormat(e);
} catch {
u.log("warn", this, "Failed to determine dataset format from URL or response headers."), t = "UNKNOWN FORMAT";
}
m(r);
}
}
this.datasetFormat = t;
const a = (await import("@arcgis/core/layers/ImageryTileLayer.js")).default;
m(r);
const s = new a({
url: e,
// @ts-ignore - datasetFormat is not part of the official ImageryTileLayer properties, but is used in the custom ioConfig for loading the image and is necessary to pass along the format information.
ioConfig: {
skipExtensions: ["aux.xml", "jgw"],
skipMapInfo: !0,
datasetFormat: t
},
customParameters: i ?? void 0
});
return await s.load(r), m(r), this._cache = s, { layer: this._cache, size: this.size };
}
};
h([
c()
], n.prototype, "_cache", 2);
h([
c()
], n.prototype, "autoLoad", 2);
h([
c()
], n.prototype, "customParameters", 2);
h([
c()
], n.prototype, "datasetFormat", 2);
h([
c()
], n.prototype, "url", 2);
h([
c()
], n.prototype, "layer", 1);
h([
c()
], n.prototype, "size", 1);
n = h([
f("components.oriented-imagery-viewer.support.NonPanoramicMedia")
], n);
function A(r, e, i, t, a) {
const { width: s, height: o } = L(r, e, a);
return Math.max(s / i, o / t);
}
const F = 96, E = 39.37, l = E * F;
function N(r) {
const e = l * 0.25, i = l * r, t = [];
let a = i;
for (; a > e; )
t.push(a), a *= 0.5;
t.push(e);
const { lods: s } = R.create({
scales: t
});
return {
minScale: i,
lods: s
};
}
class H extends b {
get graphics() {
return this._graphicsLayer?.graphics;
}
_ensureGraphicsLayer() {
(!this._graphicsLayer || this._graphicsLayer.destroyed) && (this._graphicsLayer = new G({
title: "Overlays",
listMode: "hide",
visible: !0,
blendMode: "source-atop"
}));
}
hostLoaded() {
this._ensureGraphicsLayer(), this.component.manager.onLifecycle(() => [
d(
() => this.component?.map,
(e, i) => {
i?.layers.remove(this._graphicsLayer), e && e?.layers.add(this._graphicsLayer);
},
{ initial: !0, sync: !0 }
),
d(
() => this.component?.map?.allLayers.length,
(e) => {
e && this.component?.map?.layers.reorder(this._graphicsLayer, e - 1);
},
{ initial: !0, sync: !0 }
)
]);
}
/**
* Adds a graphic to the graphics layer.
*/
addGraphic(e) {
this._graphicsLayer.add(e);
}
/**
* Adds graphics to the graphics layer.
*/
addGraphics(e) {
this._graphicsLayer.addMany(e);
}
/**
* Removes a graphic from the graphics layer.
*/
removeGraphic(e) {
this._graphicsLayer?.destroyed || this._graphicsLayer.remove(e);
}
/**
* Removes graphics from the graphics layer.
*/
removeGraphics(e) {
this._graphicsLayer?.destroyed || this._graphicsLayer.removeMany(e);
}
/**
* Removes all graphics from the graphics layer.
*/
clearGraphics() {
this._graphicsLayer?.destroyed || this._graphicsLayer.removeAll();
}
/**
* Destroys the graphics layer.
*/
destroy() {
this._graphicsLayer?.destroy();
}
}
class S extends y {
constructor() {
super(...arguments), this._messages = M(), this._graphicsController = new H(this), this._imageChanged = !1, this._internalMap = P(), this._loading = !1, this.hideHeader = !1, this.hideLoader = !1, this.hideZoomControls = !1, this.messageOverrides = this._messages._overrides, this.rotation = 0;
}
static {
this.properties = { _imageChanged: 16, _internalMap: 16, _image: 16, _loading: 16, _media: 16, hideHeader: 5, hideLoader: 5, hideZoomControls: 5, messageOverrides: 0, media: 0, rotation: 9 };
}
static {
this.styles = [x];
}
get imageRenderer() {
return this._internalMap?.value?.view;
}
get map() {
return this.imageRenderer?.map;
}
get media() {
return this._media;
}
set media(e) {
if (!e) {
this._mediaAbortController?.abort(), this._media = void 0, this._clearImage();
return;
}
this._media = e instanceof n ? e : new n(e);
}
addGraphic(e) {
this._graphicsController.addGraphic(e);
}
addGraphics(e) {
this._graphicsController.addGraphics(e);
}
clearGraphics() {
this._graphicsController.clearGraphics();
}
async mediaOnLoad() {
return this._mediaPromise && await this._mediaPromise, this._media;
}
removeGraphic(e) {
this._graphicsController.removeGraphic(e);
}
removeGraphics(e) {
this._graphicsController.removeGraphics(e);
}
loaded() {
this.manager.onLifecycle(() => [
this._createResizeConstraint(),
this._createRotationHandler(),
this._createPanConstraint(),
d(() => this._media, (e) => {
this._mediaAbortController?.abort(), e && (this._mediaAbortController = new AbortController(), this._mediaPromise = this._loadMediaInternal(e, this._mediaAbortController));
}, {
initial: !0,
sync: !0
})
]);
}
_createPanConstraint() {
return d(() => ({ image: this._image, imageRenderer: this.imageRenderer }), ({ image: e, imageRenderer: i }) => {
!e || !i?.ready || C(i, e);
}, { sync: !0, initial: !0 });
}
_createResizeConstraint() {
return d(() => {
if (!this.imageRenderer?.ready || !this._image)
return;
const { width: e, height: i } = this._image.serviceRasterInfo, { width: t, height: a, rotation: s } = this.imageRenderer;
return A(e, i, t, a, s);
}, (e) => {
if (!e || !this.imageRenderer)
return;
const { constraints: i, scale: t } = this.imageRenderer, a = i.minScale, { lods: s, minScale: o } = N(e);
i.set({
minScale: o,
lods: s
}), this.imageRenderer.scale = this._imageChanged || Math.abs(t - a) <= 1e-6 ? o : t, this._imageChanged = !1;
}, { sync: !0, initial: !0 });
}
_createRotationHandler() {
return d(() => this.rotation, (e) => {
this.imageRenderer && (this.imageRenderer.constraints.rotationEnabled = !0, this.imageRenderer.rotation = e, this.imageRenderer.constraints.rotationEnabled = !1);
}, { sync: !0, initial: !0 });
}
_clearImage() {
this._image?.destroy(), this._image = void 0;
}
async _loadMediaInternal(e, i) {
if (this._loading = !0, this._clearImage(), !e)
throw new Error("No media provided");
const { layer: t } = await e.load(i).finally(() => {
this._loading = !1;
});
m(i), this._imageChanged = !0, this._image = t, this.imageRenderer?.map?.layers.add(this._image);
}
render() {
return _`<calcite-panel .loading=${this.hideLoader ? void 0 : this._loading} .heading=${this.hideHeader ? void 0 : this._messages.title}><arcgis-map hide-attribution .spatialReference=${v.WebMercator} ${I(this._internalMap)}><arcgis-zoom .hidden=${this.hideZoomControls} slot=top-left></arcgis-zoom></arcgis-map></calcite-panel>`;
}
}
p("arcgis-oriented-imagery-viewer-image-viewer", S);
export {
S as ArcgisOrientedImageryViewerImageViewer
};