@arcgis/map-components 5.2.0-next.7 → 5.2.0-next.70

package/dist/components/arcgis-oriented-imagery-viewer-panoramic-viewer/customElement.js

@@ -0,0 +1,1006 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as re } from "../../chunks/runtime.js";
+import { css as se, html as Z } from "lit";
+import { LitElement as ae } from "@arcgis/lumina";
+import { createRef as j, ref as q } from "lit/directives/ref.js";
+import { G as ne } from "../../chunks/graphicsLayerController.js";
+import { u as le } from "../../chunks/useT9n.js";
+import H from "@arcgis/core/geometry/SpatialReference.js";
+import Q from "@arcgis/core/Graphic.js";
+import "@arcgis/core/Camera.js";
+import he from "@arcgis/core/views/3d/environment/Environment.js";
+import { on as ce, when as me, watch as k } from "@arcgis/core/core/reactiveUtils.js";
+import { once as K, on as J } from "@arcgis/core/applications/Components/baUtils.js";
+import ee from "@arcgis/core/core/Collection.js";
+import de from "@arcgis/core/symbols/FillSymbol3DLayer.js";
+import ue from "@arcgis/core/symbols/MeshSymbol3D.js";
+import pe from "@arcgis/core/Ground.js";
+import fe from "@arcgis/core/core/Accessor.js";
+import { property as C, subclass as _e } from "@arcgis/core/core/accessorSupport/decorators.js";
+import we from "@arcgis/core/core/Error.js";
+import ge from "@arcgis/core/geometry/Mesh.js";
+import { t as z, c as ve, i as ye } from "../../chunks/async-utils.js";
+import { guessExtensionFromURI as be } from "../../chunks/urlUtils.js";
+import Me from "@arcgis/core/geometry/Extent.js";
+import xe from "@arcgis/core/layers/ImageryTileLayer.js";
+import X from "@arcgis/core/geometry/support/MeshComponent.js";
+import Y from "@arcgis/core/geometry/support/MeshMaterialMetallicRoughness.js";
+import U from "@arcgis/core/geometry/support/MeshTexture.js";
+import Ce from "@arcgis/core/geometry/support/MeshVertexAttributes.js";
+import W from "@arcgis/core/geometry/Point.js";
+import { createSphere as Te } from "@arcgis/core/geometry/support/meshUtils.js";
+import Se from "@arcgis/core/symbols/Font.js";
+import { c as ze, b as Ie, f as Pe } from "../../chunks/utils3.js";
+import Le from "@arcgis/core/symbols/TextSymbol.js";
+import { log as Re } from "@arcgis/toolkit/log";
+const Ae = se`:host{height:100%;--arcgis-view-color-focus: none}`;
+function Fe(r, e = !0) {
+  const o = ((e ? r : r * 180 / Math.PI) % 360 + 360) % 360;
+  return e ? o : o * Math.PI / 180;
+}
+function Ne(r, e = !0) {
+  const t = e ? r : r * 180 / Math.PI, o = Math.max(0.5, Math.min(179.5, t));
+  return e ? o : o * Math.PI / 180;
+}
+function $e(r, e) {
+  return new Promise((t, o) => {
+    if (r.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
+      t();
+      return;
+    }
+    e(K(r, "canplay", t)), e(K(r, "error", o));
+  });
+}
+function Be(r) {
+  return new Q({
+    geometry: r,
+    symbol: new ue({
+      symbolLayers: new ee([new de()])
+    })
+  });
+}
+function O({
+  data: r,
+  center: e = Ve(),
+  size: t = Ee,
+  horizonPitch: o = 0,
+  horizonYaw: i = 0,
+  horizonRoll: a = 0
+}) {
+  const s = e.clone();
+  s.z = -t / 2;
+  const n = Te(s, {
+    size: t,
+    densificationFactor: 2,
+    vertexSpace: "georeferenced",
+    material: new Y({
+      colorTexture: new U({
+        data: r
+      }),
+      unlit: !0
+    })
+  });
+  if (n.components?.at(0)?.set({
+    trustSourceNormals: !0
+  }), n.vertexAttributes.uv) {
+    const l = n.vertexAttributes.uv.length ?? 0;
+    for (let d = 0; d < l; d++)
+      n.vertexAttributes.uv[d * 2 + 0] = 1 - n.vertexAttributes.uv[d * 2 + 0];
+  }
+  return n.rotate(o, a, i, {
+    origin: n.extent.center
+  }), n.centerAt(s), n;
+}
+const Ve = () => new W({
+  x: 0,
+  y: 0,
+  z: 0,
+  spatialReference: H.WebMercator
+}), Ee = 1e3, Ge = 114;
+function ke(r, e, t) {
+  const o = /* @__PURE__ */ new Map(), i = Array.from(r.keys()).sort((h, p) => h - p)[0], {
+    maxCol: a,
+    minCol: s,
+    maxRow: n,
+    minRow: l
+  } = r.get(i), d = a - s + 1, m = n - l + 1, c = d * (t - 1) + 1;
+  return De(
+    { maximumPyramidLevel: e, blockBoundary: r, baseCols: d, baseRows: m, vertexPerEdge: t, baseVertexPerRow: c },
+    o
+  ), o;
+}
+function De(r, e) {
+  const { maximumPyramidLevel: t, blockBoundary: o, baseCols: i, baseRows: a, vertexPerEdge: s, baseVertexPerRow: n } = r;
+  for (let l = 0; l <= t; l += 1) {
+    const { maxCol: d, minCol: m, maxRow: c, minRow: h } = o.get(l), p = d - m + 1, u = c - h + 1, _ = i / p, g = a / u, w = s - 1;
+    Oe(
+      {
+        minRow: h,
+        minCol: m,
+        numberOfRows: u,
+        numberOfColumns: p,
+        vertexLimit: w,
+        rowStep: g,
+        colStep: _,
+        baseVertexPerRow: n,
+        level: l
+      },
+      e
+    );
+  }
+}
+function Oe(r, e) {
+  const { minRow: t, minCol: o, numberOfRows: i, numberOfColumns: a, vertexLimit: s, rowStep: n, colStep: l, baseVertexPerRow: d, level: m } = r;
+  for (let c = 0; c < i; c += 1)
+    for (let h = 0; h < a; h += 1) {
+      const p = 2 * s * s, u = new Uint32Array(p * 3);
+      let _ = 0;
+      const g = o + (a - 1 - h), w = t + c;
+      for (let v = 0; v < s; v += 1)
+        for (let y = 0; y < s; y += 1) {
+          const f = c * n * s + v * n, T = h * l * s + y * l, F = Math.round(f * d + T), I = Math.round(F + l), S = Math.round(F + n * d), N = Math.round(S + l);
+          u[_++] = F, u[_++] = S, u[_++] = I, u[_++] = I, u[_++] = S, u[_++] = N;
+        }
+      e.set(`${m}/${w}/${g}`, u);
+    }
+}
+function He(r, e) {
+  const t = /* @__PURE__ */ new Map(), {
+    lods: o,
+    origin: i,
+    size: [a, s]
+  } = r, { xmin: n, ymin: l, xmax: d, ymax: m } = e;
+  for (const { resolution: c, level: h } of o) {
+    const p = Math.floor((i.y - m) / (s * c)), u = Math.floor((i.y - l) / (s * c)) - 1, _ = Math.floor((n - i.x) / (a * c)), g = Math.ceil((d - i.x) / (a * c)) - 1, w = u - p + 1, v = g - _ + 1;
+    if (w <= 0 || v <= 0)
+      continue;
+    const y = 360 / v, f = 180 / w, T = Math.max(y / a, f / s);
+    Number.isFinite(T) && t.set(o.length - 1 - h, {
+      minRow: p,
+      maxRow: u,
+      minCol: _,
+      maxCol: g,
+      resolution: c,
+      pixelAngle: T
+    });
+  }
+  return t;
+}
+function Ke(r) {
+  return typeof r == "string" ? Number.parseInt(r, 10) : r;
+}
+function Ye(r) {
+  r.set("premultiplyAlpha", !0);
+  const e = r.getAsRGBA();
+  return new ImageData(e, r.width, r.height);
+}
+function Ue(r, e, t) {
+  return (r * (t - 1) + 1) * (e * (t - 1) + 1);
+}
+class We {
+  constructor(e) {
+    this._componentCache = /* @__PURE__ */ new Map(), this._tileAnchorMap = /* @__PURE__ */ new Map(), this._attachedComponentKeys = /* @__PURE__ */ new Set(), this._remappedFaceMap = /* @__PURE__ */ new Map(), this._levels = [], this._blockBoundaryMap = /* @__PURE__ */ new Map(), this.radius = 500, this.vertexPerEdge = 25, this.imageSize = [0, 0], this.layer = e.layer;
+  }
+  // Finest level is used to build the shared skeleton mesh so all LOD faces can map onto it.
+  get _meshResolutionLevel() {
+    let e = this._levels[0], t = Number.POSITIVE_INFINITY;
+    for (const o of this._levels) {
+      const i = this._blockBoundaryMap.get(o);
+      i && i.pixelAngle < t && (t = i.pixelAngle, e = o);
+    }
+    return e;
+  }
+  get blockBoundaryMap() {
+    return this._blockBoundaryMap;
+  }
+  get levels() {
+    return this._levels;
+  }
+  get baseLevel() {
+    let e = this._levels[0], t = Number.NEGATIVE_INFINITY;
+    for (const o of this._levels) {
+      const i = this._blockBoundaryMap.get(o);
+      i && i.pixelAngle > t && (t = i.pixelAngle, e = o);
+    }
+    return e;
+  }
+  get maxLevel() {
+    return Math.max(...this._levels);
+  }
+  async load(e) {
+    if (await this.layer.load(e), this._blockBoundaryMap = He(this.layer.tileInfo, this.layer.fullExtent), this._levels = [...this._blockBoundaryMap.keys()].sort((t, o) => t - o), this._levels.length === 0)
+      throw new Error("No valid tile levels found for panoramic mesh generation.");
+    return this.imageSize = [this.layer.fullExtent.width, this.layer.fullExtent.height], this._baseMesh = this._createBaseMesh(this.radius, this.vertexPerEdge), this;
+  }
+  get baseMesh() {
+    if (!this._baseMesh)
+      throw new Error("Base mesh is not created yet.");
+    return this._baseMesh;
+  }
+  destroy() {
+    this._faceMap?.clear(), this._remappedFaceMap.clear(), this._componentCache.clear(), this._attachedComponentKeys.clear(), this._tileAnchorMap.clear(), this._baseMesh?.destroy();
+  }
+  _createBaseMesh(e, t) {
+    if (!this._blockBoundaryMap.has(this._meshResolutionLevel))
+      throw new Error(`No block boundaries found for mesh resolution level ${this._meshResolutionLevel}`);
+    const { maxCol: o, minCol: i, maxRow: a, minRow: s } = this._blockBoundaryMap.get(this._meshResolutionLevel), n = a - s + 1, l = o - i + 1, d = Ue(n, l, t), m = new Float64Array(d * 3), c = new Float32Array(d * 3), h = new Float32Array(d * 2), p = l * (t - 1) + 1, u = l * (t - 1);
+    for (let f = 0; f < d; f += 1) {
+      const T = Math.floor(f / p), F = f % p, I = 1 - F / (l * (t - 1)), S = T / (n * (t - 1)), N = 180 * (1 - S), E = 360 * (I - 0.5), P = [
+        Math.sin(N * Math.PI / 180) * Math.sin(E * Math.PI / 180),
+        Math.cos(E * Math.PI / 180) * Math.sin(N * Math.PI / 180),
+        -Math.cos(N * Math.PI / 180)
+      ];
+      m[f * 3] = e * P[0], m[f * 3 + 1] = e * P[1], m[f * 3 + 2] = e * P[2], c[f * 3] = -P[0], c[f * 3 + 1] = -P[1], c[f * 3 + 2] = -P[2];
+      const L = T * p;
+      F === u && (m[f * 3] = m[L * 3], m[f * 3 + 1] = m[L * 3 + 1], m[f * 3 + 2] = m[L * 3 + 2], c[f * 3] = c[L * 3], c[f * 3 + 1] = c[L * 3 + 1], c[f * 3 + 2] = c[L * 3 + 2]), h[f * 2] = I, h[f * 2 + 1] = S;
+    }
+    this._faceMap = ke(this._blockBoundaryMap, Math.max(...this._levels), t);
+    const { remappedFaceMap: _, splitPosition: g, splitNormals: w, splitUv: v } = this._preSplitTileGeometry(m, c, h);
+    this._remappedFaceMap = _;
+    const y = new X({
+      faces: new Uint32Array([0, 1, 2]),
+      name: "__placeholder__"
+    });
+    return y.set({
+      trustSourceNormals: !0
+    }), this._baseMesh = new ge({
+      components: [
+        // Dummy component keeps the mesh valid before any tile component is attached.
+        y
+      ],
+      vertexAttributes: new Ce({ position: g, normal: w, uv: v }),
+      spatialReference: { wkid: 3857 }
+    }), this._baseMesh;
+  }
+  _preSplitTileGeometry(e, t, o) {
+    let i = 0;
+    for (const c of this._faceMap.values()) {
+      const h = /* @__PURE__ */ new Set();
+      for (let p = 0; p < c.length; p += 1)
+        h.add(c[p]);
+      i += h.size;
+    }
+    const a = new Float64Array(i * 3), s = new Float32Array(i * 3), n = new Float32Array(i * 2), l = /* @__PURE__ */ new Map(), d = 1e-8;
+    let m = 0;
+    for (const [c, h] of this._faceMap) {
+      const p = /* @__PURE__ */ new Map();
+      let u = 0, _ = 0, g = 0, w = Number.POSITIVE_INFINITY, v = Number.NEGATIVE_INFINITY, y = Number.POSITIVE_INFINITY, f = Number.NEGATIVE_INFINITY;
+      for (let R = 0; R < h.length; R += 1) {
+        const $ = h[R];
+        if (p.has($))
+          continue;
+        const B = $ * 2, M = o[B], A = o[B + 1];
+        M < w && (w = M), M > v && (v = M), A < y && (y = A), A > f && (f = A);
+        const V = $ * 3;
+        u += e[V], _ += e[V + 1], g += e[V + 2], p.set($, m), m += 1;
+      }
+      const T = v - w, F = f - y, I = Math.hypot(u, _, g), S = this.radius * 1.01, [N, E] = this.layer.tileInfo?.size ?? [256, 256], P = 0.5 / N, L = 0.5 / E;
+      this._tileAnchorMap.set(
+        c,
+        I > 0 ? [
+          u / I * S,
+          _ / I * S,
+          g / I * S
+        ] : [0, 0, S]
+      );
+      for (const [R, $] of p) {
+        const B = R * 3, M = $ * 3;
+        a[M] = e[B], a[M + 1] = e[B + 1], a[M + 2] = e[B + 2], s[M] = t[B], s[M + 1] = t[B + 1], s[M + 2] = t[B + 2];
+        const A = R * 2, V = $ * 2, G = o[A], te = o[A + 1], ie = T < d ? 0.5 : (G - w) / T, oe = F < d ? 0.5 : (te - y) / F;
+        n[V] = P + ie * (1 - 2 * P), n[V + 1] = L + oe * (1 - 2 * L);
+      }
+      const D = new Uint32Array(h.length);
+      for (let R = 0; R < h.length; R += 1) {
+        const $ = p.get(h[R]);
+        if ($ == null)
+          throw new Error(`Failed to remap face index for tile ${c}`);
+        D[R] = $;
+      }
+      l.set(c, D);
+    }
+    return { remappedFaceMap: l, splitPosition: a, splitNormals: s, splitUv: n };
+  }
+  getTileAnchor(e, t, o) {
+    const i = this._tileAnchorMap.get(`${e}/${t}/${o}`);
+    if (!i)
+      throw new Error(`No tile anchor found for level ${e}, row ${t}, column ${o}`);
+    return i;
+  }
+  loadComponent(e, t, o, i) {
+    const a = `${e}/${t}/${o}`;
+    if (this._attachedComponentKeys.has(a))
+      return;
+    let s = this._componentCache.get(a);
+    if (s)
+      s.material = new Y({
+        unlit: !0,
+        colorTexture: new U({
+          data: i
+        })
+      });
+    else {
+      const l = this._remappedFaceMap.get(a);
+      if (!l)
+        throw new Error(`No faces found for level ${e}, row ${t}, column ${o}`);
+      s = new X({
+        faces: l,
+        name: a,
+        material: new Y({
+          unlit: !0,
+          colorTexture: new U({
+            data: i
+          })
+        })
+      }), s.set({
+        trustSourceNormals: !0
+      }), this._componentCache.set(`${e}/${t}/${o}`, s);
+    }
+    s.name = a, this.baseMesh.addComponent(s);
+    const n = this.baseMesh.components?.find((l) => l.name === "__placeholder__");
+    n && this.baseMesh.removeComponent(n), this._attachedComponentKeys.add(a), this.baseMesh.vertexAttributesChanged();
+  }
+  getFacesForTile(e, t, o) {
+    const i = this._remappedFaceMap.get(`${e}/${t}/${o}`);
+    if (!i)
+      throw new Error(`No faces found for level ${e}, row ${t}, column ${o}`);
+    return i;
+  }
+  unloadComponent(e, t, o) {
+    const i = `${e}/${t}/${o}`, a = this._componentCache.get(i);
+    a && this._attachedComponentKeys.has(i) && (this.baseMesh.removeComponent(a), this._attachedComponentKeys.delete(i), this.baseMesh.vertexAttributesChanged());
+  }
+}
+class Ze {
+  constructor(e) {
+    this._baseLevel = e.baseLevel, this._levels = [...e.levels], this._blockBoundaryMap = e.blockBoundaryMap;
+  }
+  plan(e, t, o) {
+    const i = this._selectLevel(e);
+    this._lastStableLevel = i;
+    const a = this._createHybridDesiredSet(i, e);
+    this._retainActiveLevelDetails(a, t, i);
+    const s = this._prioritizeDesiredKeys(a, i), n = /* @__PURE__ */ new Set([...t, ...o]), l = s.filter((c) => !n.has(c)), d = s.filter((c) => t.has(c)), m = [...t].filter((c) => !a.has(c));
+    return {
+      stableLevel: i,
+      desiredKeySet: a,
+      toFetch: l,
+      toKeep: d,
+      toDrop: m
+    };
+  }
+  _retainActiveLevelDetails(e, t, o) {
+    if (o !== this._baseLevel)
+      for (const i of t) {
+        const a = this._parseTileKey(i);
+        a && a.level === o && e.add(i);
+      }
+  }
+  _createHybridDesiredSet(e, t) {
+    const o = /* @__PURE__ */ new Set(), i = this._blockBoundaryMap.get(this._baseLevel);
+    if (!i)
+      return o;
+    for (let s = i.minRow; s <= i.maxRow; s += 1)
+      for (let n = i.minCol; n <= i.maxCol; n += 1)
+        o.add(`${this._baseLevel}/${s}/${n}`);
+    if (e === this._baseLevel)
+      return o;
+    const a = this._getViewTileKeys(e, t.heading, t.pitch, t.hfov, t.vfov);
+    for (const s of a)
+      o.add(s);
+    return o;
+  }
+  _getViewTileKeys(e, t, o, i, a) {
+    const s = this._blockBoundaryMap.get(e);
+    if (!s)
+      return [];
+    const { minRow: n, maxRow: l, minCol: d, maxCol: m } = s, c = l - n + 1, h = m - d + 1, u = Math.max(0.1, Math.min(179.9, o)) - 90, _ = Math.max(0.01, Math.min(360, i)), g = Math.max(0.01, Math.min(180, a)), w = 360 / h, v = 180 / c, y = Math.min(12, w * 0.35), f = Math.min(8, v * 0.35), T = Math.min(360, _ + y * 2), F = Math.min(180, g + f * 2), I = Math.max(-89.9, Math.min(89.9, u - F / 2)), S = Math.max(-89.9, Math.min(89.9, u + F / 2)), N = (M) => {
+      const A = (90 - M) / 180, V = Math.floor(A * c);
+      return n + Math.max(0, Math.min(c - 1, V));
+    }, E = (M) => {
+      const A = this._normalizeHeading(M) / 360, G = (Math.floor(A * h) % h + h) % h;
+      return d + G;
+    }, P = this._normalizeHeading(t - T / 2), L = this._normalizeHeading(t + T / 2), D = Math.min(N(S), N(I)), R = Math.max(N(S), N(I)), $ = T >= 360 ? [[d, m]] : P <= L ? [[E(P), E(L)]] : [
+      [d, E(L)],
+      [E(P), m]
+    ], B = /* @__PURE__ */ new Set();
+    for (let M = D; M <= R; M += 1)
+      for (const [A, V] of $)
+        for (let G = A; G <= V; G += 1)
+          B.add(`${e}/${M}/${G}`);
+    return [...B];
+  }
+  _normalizeHeading(e) {
+    const t = e % 360;
+    return t < 0 ? t + 360 : t;
+  }
+  _prioritizeDesiredKeys(e, t) {
+    const o = [...e], i = (a) => {
+      const s = this._parseTileKey(a);
+      return s ? s.level === t ? 0 : s.level === this._baseLevel ? 2 : 1 : Number.POSITIVE_INFINITY;
+    };
+    return o.sort((a, s) => {
+      const n = i(a) - i(s);
+      if (n !== 0)
+        return n;
+      const l = this._parseTileKey(a), d = this._parseTileKey(s);
+      return !l || !d ? a.localeCompare(s) : l.level !== d.level ? l.level - d.level : l.row !== d.row ? l.row - d.row : l.col - d.col;
+    }), o;
+  }
+  _parseTileKey(e) {
+    const [t, o, i] = e.split("/"), a = Number(t), s = Number(o), n = Number(i);
+    if (!(!Number.isFinite(a) || !Number.isFinite(s) || !Number.isFinite(n)))
+      return { level: a, row: s, col: n };
+  }
+  _selectLevel(e) {
+    const [t, o] = e.viewportSize, i = Math.max(1, t), a = Math.max(1, o), s = Math.max(e.hfov / i, e.vfov / a), n = 0.25, l = this._levels.map((h) => ({ level: h, boundary: this._blockBoundaryMap.get(h) })).filter((h) => h.boundary != null).sort((h, p) => p.boundary.pixelAngle - h.boundary.pixelAngle);
+    if (l.length === 0)
+      return this._baseLevel;
+    const d = /* @__PURE__ */ new Map();
+    for (const h of l)
+      d.set(h.level, s / h.boundary.pixelAngle);
+    const m = /* @__PURE__ */ new Map();
+    l.forEach((h, p) => {
+      m.set(h.level, p);
+    });
+    let c = l[l.length - 1].level;
+    for (const h of l)
+      if ((d.get(h.level) ?? 0) >= n) {
+        c = h.level;
+        break;
+      }
+    if (this._lastStableLevel != null && m.has(this._lastStableLevel)) {
+      const h = m.get(this._lastStableLevel), p = m.get(c);
+      if (p > h && (d.get(this._lastStableLevel) ?? 0) >= 0.2)
+        return this._lastStableLevel;
+      if (p < h)
+        return this._lastStableLevel;
+    }
+    return c;
+  }
+}
+class je {
+  constructor(e) {
+    this._layer = e, this._inflightControllers = /* @__PURE__ */ new Map(), this._inflightSet = /* @__PURE__ */ new Set(), this._loadedSet = /* @__PURE__ */ new Set(), this.fetchTileImageData = async (t, o, i, a) => {
+      const s = Ke(t), n = a ? { signal: a } : void 0, l = this._meshBuilder.blockBoundaryMap.get(s);
+      if (!l)
+        throw new Error(`No tile boundary found for level ${t}`);
+      const { maxCol: d, maxRow: m, minCol: c, minRow: h } = l, p = d - c + 1, u = m - h + 1, _ = i - c, g = o - h, w = _ * this._meshBuilder.imageSize[0] / p, v = g * this._meshBuilder.imageSize[1] / u, y = Math.min(
+        (_ + 1) * this._meshBuilder.imageSize[0] / p,
+        this._meshBuilder.imageSize[0]
+      ), f = Math.min(
+        (g + 1) * this._meshBuilder.imageSize[1] / u,
+        this._meshBuilder.imageSize[1]
+      ), T = await this._layer.fetchPixels(
+        new Me({
+          xmin: w - 0.5,
+          ymin: 0.5 - f,
+          xmax: y - 0.5,
+          ymax: 0.5 - v,
+          spatialReference: this._layer.fullExtent.spatialReference
+        }),
+        y - w,
+        f - v,
+        n
+      );
+      return Ye(T.pixelBlock);
+    }, this.loadComponent = (t, o, i, a) => this._meshBuilder.loadComponent(t, o, i, a), this.unloadComponent = (t, o, i) => this._meshBuilder.unloadComponent(t, o, i), this._meshBuilder = new We({ layer: e });
+  }
+  get imageSize() {
+    return this._meshBuilder.imageSize;
+  }
+  get baseMesh() {
+    return this._meshBuilder.baseMesh;
+  }
+  get currentLevel() {
+    return this._currentLevel;
+  }
+  getTileAnchor(e, t, o) {
+    return this._meshBuilder.getTileAnchor(e, t, o);
+  }
+  async load() {
+    return await this._meshBuilder.load(), this._tilePlanner = new Ze({
+      blockBoundaryMap: this._meshBuilder.blockBoundaryMap,
+      baseLevel: this._meshBuilder.baseLevel,
+      levels: [...this._meshBuilder.levels]
+    }), this;
+  }
+  destroy() {
+    for (const e of this._inflightControllers.values())
+      e.abort();
+    this._inflightControllers.clear(), this._inflightSet.clear(), this._loadedSet.clear(), this._tilePlanner = void 0, this._meshBuilder.destroy();
+  }
+  planTiles(e) {
+    if (!this._tilePlanner)
+      throw new Error("PanoramicTileSource is not loaded yet.");
+    const t = this._tilePlanner.plan(e, this._loadedSet, this._inflightSet);
+    return this._currentLevel = t.stableLevel, t;
+  }
+  markTileInflight(e, t) {
+    this._inflightSet.add(e), this._inflightControllers.set(e, t);
+  }
+  markTileLoaded(e) {
+    this._inflightSet.delete(e), this._inflightControllers.delete(e), this._loadedSet.add(e);
+  }
+  markTileInflightResolved(e) {
+    this._inflightSet.delete(e), this._inflightControllers.delete(e);
+  }
+  markTileDropped(e) {
+    this._loadedSet.delete(e);
+  }
+  cancelStaleInflight(e) {
+    for (const t of this._inflightSet) {
+      if (e.has(t))
+        continue;
+      this._inflightControllers.get(t)?.abort(), this._inflightControllers.delete(t), this._inflightSet.delete(t);
+    }
+  }
+}
+var qe = Object.defineProperty, Je = Object.getOwnPropertyDescriptor, x = (r, e, t, o) => {
+  for (var i = o > 1 ? void 0 : o ? Je(e, t) : e, a = r.length - 1, s; a >= 0; a--)
+    (s = r[a]) && (i = (o ? s(e, t, i) : s(i)) || i);
+  return o && i && qe(e, t, i), i;
+};
+const Xe = 0, Qe = 0, et = 0, tt = /* @__PURE__ */ new Set(["JPG", "JPEG", "TIFF", "TIF", "MRF"]), it = /* @__PURE__ */ new Set(["MRF", "TIFF", "TIF"]);
+let b = class extends fe {
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  constructor(r) {
+    super(r), this._size = [0, 0], this.autoLoad = !1, this.type = "image", this.uiStrings = {}, this._resolveMedia = async (e) => {
+      const t = Promise.withResolvers(), o = e?.signal ? K(e?.signal, "abort", t.resolve) : null, i = this.type === "video" ? document.createElement("video") : document.createElement("img");
+      this.type === "video" && (i.setAttribute("playsinline", "true"), i.setAttribute("muted", "true"), i.setAttribute("autoplay", "true")), i.crossOrigin = "anonymous", i.src = this.url;
+      let a = null;
+      const s = this.type === "video" ? $e(i, (m) => this.addHandles(m)) : await new Promise((m, c) => {
+        a = [
+          J(i, "error", (h) => {
+            c(h);
+          }),
+          J(i, "load", m)
+        ];
+      }).finally(() => {
+        a?.forEach((m) => m.remove()), a = null;
+      }), n = Promise.race([s, t.promise]);
+      try {
+        await n;
+      } finally {
+        o?.remove();
+      }
+      z(e);
+      const l = i, d = await O({
+        data: i,
+        horizonPitch: this.horizonPitch,
+        horizonRoll: this.horizonRoll,
+        horizonYaw: this.horizonYaw
+      }).load(e);
+      return z(e), { media: l, mesh: d };
+    };
+  }
+  static isPanoramicMedia(r) {
+    return !!r && typeof r == "object" && "declaredClass" in r && typeof r.declaredClass == "string" && r.declaredClass === "components.oriented-imagery-viewer-panoramic-viewer.support.PanoramicMedia";
+  }
+  destroy() {
+    this._cache = void 0;
+  }
+  get horizonPitch() {
+    const { matrix: r } = this;
+    return r ? 180 * Math.asin(-r[6]) / Math.PI : Xe;
+  }
+  get horizonRoll() {
+    const { matrix: r } = this;
+    return r ? 180 * Math.atan(r[7] / r[8]) / Math.PI : et;
+  }
+  get horizonYaw() {
+    const { matrix: r, cameraHeading: e } = this;
+    return r ? 180 * Math.atan2(r[3], r[0]) / Math.PI : e ? -e : Qe;
+  }
+  get panoramicTileSource() {
+    return this._panoramicTileSource;
+  }
+  get element() {
+    return this._cache;
+  }
+  get size() {
+    return this._size;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  //--------------------------------------------------------------------------
+  async load(r) {
+    if (this.type === "video")
+      return await this.loadVideoMesh(r);
+    let e = this.extension;
+    if (e || (e = be(this.url)), !e || !tt.has(e))
+      throw new we(
+        "unsupported-format",
+        this.uiStrings["unsupported-format"] ?? "Unsupported image format: {extension}",
+        {
+          datasetFormat: e ?? "UNKNOWN FORMAT"
+        }
+      );
+    return it.has(e) ? await this.loadOptimizedImageMesh(r) : await this.loadImageMesh(r);
+  }
+  async loadOptimizedImageMesh(r) {
+    this._panoramicTileSource?.destroy();
+    const e = new xe({
+      url: this.url,
+      // @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.
+      datasetFormat: this.extension,
+      skipMapInfo: !0,
+      skipExtensions: ["aux.xml", "jgw"]
+    });
+    this._panoramicTileSource = new je(e);
+    const { imageSize: t, baseMesh: o } = await this._panoramicTileSource.load();
+    return z(r), { mesh: o, size: t };
+  }
+  async loadVideoMesh(r) {
+    if (z(r), this._cache) {
+      const o = await O({
+        data: this._cache,
+        horizonPitch: this.horizonPitch,
+        horizonRoll: this.horizonRoll,
+        horizonYaw: this.horizonYaw
+      }).load(r);
+      return z(r), { mesh: o, size: this._size };
+    }
+    const e = await this._resolveMedia(r);
+    z(r), this._cache = e.media, this._size = [this._cache.videoWidth, this._cache.videoHeight];
+    const t = await O({
+      data: this._cache,
+      horizonPitch: this.horizonPitch,
+      horizonRoll: this.horizonRoll,
+      horizonYaw: this.horizonYaw
+    }).load(r);
+    return z(r), { mesh: t, size: this._size };
+  }
+  async loadImageMesh(r) {
+    if (this._cache) {
+      const o = await O({
+        data: this._cache,
+        horizonPitch: this.horizonPitch,
+        horizonRoll: this.horizonRoll,
+        horizonYaw: this.horizonYaw
+      }).load(r);
+      return z(r), { mesh: o, size: this._size };
+    }
+    const e = await this._resolveMedia(r);
+    z(r), this._cache = e.media;
+    const t = e.mesh;
+    return this._size = [e.media.width, e.media.height], { mesh: t, size: this._size };
+  }
+};
+x([
+  C()
+], b.prototype, "_size", 2);
+x([
+  C()
+], b.prototype, "_cache", 2);
+x([
+  C()
+], b.prototype, "autoLoad", 2);
+x([
+  C()
+], b.prototype, "cameraHeading", 2);
+x([
+  C()
+], b.prototype, "extension", 2);
+x([
+  C()
+], b.prototype, "horizonPitch", 1);
+x([
+  C()
+], b.prototype, "horizonRoll", 1);
+x([
+  C()
+], b.prototype, "horizonYaw", 1);
+x([
+  C()
+], b.prototype, "id", 2);
+x([
+  C()
+], b.prototype, "_panoramicTileSource", 2);
+x([
+  C()
+], b.prototype, "panoramicTileSource", 1);
+x([
+  C()
+], b.prototype, "element", 1);
+x([
+  C()
+], b.prototype, "matrix", 2);
+x([
+  C()
+], b.prototype, "size", 1);
+x([
+  C()
+], b.prototype, "type", 2);
+x([
+  C()
+], b.prototype, "uiStrings", 2);
+x([
+  C()
+], b.prototype, "url", 2);
+b = x([
+  _e("components.oriented-imagery-viewer-panoramic-viewer.support.PanoramicMedia")
+], b);
+const ot = () => new he({
+  atmosphereEnabled: !1,
+  starsEnabled: !1,
+  lighting: {
+    type: "virtual"
+  }
+}), rt = () => new pe({
+  opacity: 0,
+  navigationConstraint: null
+}), st = () => new W({
+  x: 0,
+  y: 0,
+  z: 0,
+  spatialReference: H.WebMercator
+});
+class at extends ae {
+  constructor() {
+    super(...arguments), this.#e = ot(), this._graphicsController = new ne(this), this._ground = rt(), this._messages = le(), this._startPosition = null, this.tileCache = /* @__PURE__ */ new Set(), this._currentGraphicsStore = new ee(), this._tileLabelGraphics = /* @__PURE__ */ new Map(), this._handleMouseWheel = (e) => {
+      e.detail.stopPropagation(), e.detail.deltaY < 0 ? this._internalZoom.value?.zoomIn() : this._internalZoom.value?.zoomOut();
+    }, this._handleDrag = (e) => {
+      e.stopPropagation();
+      const { x: t, y: o, action: i } = e;
+      let a = null, s = null;
+      switch (i) {
+        case "start":
+          this._startPosition = { x: t, y: o };
+          break;
+        case "update":
+          if (!this._startPosition)
+            return;
+          const n = (l) => {
+            if (!this._startPosition || !this.camera)
+              return;
+            if (s || (s = l), l - s < 16) {
+              a = requestAnimationFrame(n);
+              return;
+            }
+            const m = t - this._startPosition.x, c = o - this._startPosition.y, h = Fe(this.camera?.heading - m * 0.1), p = Ne(this.camera.tilt + c * 0.1);
+            this.yaw = h, this.pitch = p, this._startPosition = { x: t, y: o }, s = null;
+          };
+          a = requestAnimationFrame(n);
+          break;
+        case "end":
+          a !== null && cancelAnimationFrame(a), this._startPosition = null;
+          break;
+      }
+    }, this._internalMap = j(), this._internalZoom = j(), this._loading = !1, this.yaw = 0, this.pitch = 90, this.hideLoader = !1, this.hideTitle = !1, this.hideZoomControls = !1, this.hideVideoControls = !1, this.messageOverrides = this._messages._overrides;
+  }
+  static {
+    this.properties = { _media: 16, _internalMap: 16, _internalZoom: 16, _loading: 16, _base: 16, yaw: 9, pitch: 9, hideLoader: 5, hideTitle: 7, hideZoomControls: 5, hideVideoControls: 5, imageSize: 32, media: 0, messageOverrides: 0, hfov: 32, base: 32 };
+  }
+  static {
+    this.styles = [Ae];
+  }
+  #e;
+  get view() {
+    return this._internalMap?.value?.view;
+  }
+  get camera() {
+    if (!this.view?.destroyed)
+      return this.view?.camera;
+  }
+  set camera(e) {
+    !e || !this.view || this.view.destroyed || (e.position = st(), this.view.camera = e.clone());
+  }
+  get map() {
+    return this._internalMap.value?.view?.map;
+  }
+  get _fov() {
+    return this.camera?.fov;
+  }
+  set _fov(e) {
+    typeof e != "number" || !this._internalZoom.value || this._internalZoom.value?.zoomFOV(e);
+  }
+  get imageSize() {
+    return this._media?.size;
+  }
+  get media() {
+    return this._media;
+  }
+  set media(e) {
+    if (!e) {
+      this._mediaAbortController?.abort(), this._media = void 0, this._clearImage();
+      return;
+    }
+    this._media = b.isPanoramicMedia(e) ? e : new b(e);
+  }
+  get hfov() {
+    return this._internalZoom.value?.hfov;
+  }
+  get base() {
+    return this._base?.geometry;
+  }
+  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);
+  }
+  zoomIn() {
+    this._internalZoom.value?.zoomIn();
+  }
+  zoomOut() {
+    this._internalZoom.value?.zoomOut();
+  }
+  loaded() {
+    this.manager.onLifecycle(() => [
+      ce(() => this.view, "drag", this._handleDrag),
+      me(() => this.camera != null, () => {
+        this.camera && (this.camera.heading = this.yaw, this.camera.tilt = this.pitch, this._reloadCamera());
+      }),
+      k(() => this.yaw, () => {
+        this.camera && (this.camera.heading = this.yaw, this._reloadCamera());
+      }, { sync: !0, initial: !0 }),
+      k(() => this.pitch, () => {
+        this.camera && (this.camera.tilt = this.pitch, this._reloadCamera());
+      }, { sync: !0, initial: !0 }),
+      k(() => this._fov, () => {
+        this._reloadCamera();
+      }, { sync: !0, initial: !0 }),
+      k(() => this._media, (e) => {
+        this._mediaAbortController?.abort(), e && (this._mediaAbortController = new AbortController(), this._mediaPromise = this._loadMediaInternal(e, this._mediaAbortController));
+      }, { initial: !0, sync: !0 }),
+      k(() => {
+        if (!this.view?.ready || !this.base)
+          return;
+        const e = this._media?.panoramicTileSource;
+        if (!e)
+          return;
+        const { camera: { heading: t, tilt: o, fov: i }, width: a, height: s } = this.view, n = a / s;
+        return {
+          panoramicTileSource: e,
+          heading: t,
+          pitch: o,
+          hfov: Ie(i, n),
+          vfov: ze(i, n)
+        };
+      }, (e) => {
+        e && (this._tileUpdateDebounceHandle != null && clearTimeout(this._tileUpdateDebounceHandle), this._tileUpdateDebounceHandle = window.setTimeout(() => {
+          this._tileUpdateTask?.abort(), this._tileUpdateTask = ve(async (t) => {
+            await this._updateTilesForCurrentView(e, t);
+          }), this._tileUpdateDebounceHandle = void 0;
+        }, 150));
+      }, { initial: !0, sync: !0 })
+    ]);
+  }
+  _reloadCamera() {
+    this.camera = this.camera?.clone();
+  }
+  _clearImage() {
+    this._tileUpdateDebounceHandle != null && (clearTimeout(this._tileUpdateDebounceHandle), this._tileUpdateDebounceHandle = void 0), this._tileUpdateTask?.abort(), this._tileUpdateTask = void 0, this.tileCache.clear();
+    for (const e of this._tileLabelGraphics.values())
+      this.removeGraphic(e);
+    this._tileLabelGraphics.clear(), this.clearGraphics(), this._base = void 0, this._currentGraphicsStore.removeAll();
+  }
+  _parseTileKey(e) {
+    const [t, o, i] = e.split("/").map(Number);
+    return { level: t, row: o, col: i };
+  }
+  _createTileLabelGraphic(e, t) {
+    const { level: o, row: i, col: a } = this._parseTileKey(t), [s, n, l] = e.getTileAnchor(o, i, a);
+    return new Q({
+      attributes: { tileKey: t },
+      geometry: new W({
+        x: s,
+        y: n,
+        z: l,
+        spatialReference: H.WebMercator
+      }),
+      symbol: new Le({
+        color: [255, 255, 255, 0.95],
+        font: new Se({
+          family: "Avenir Next",
+          size: 8,
+          weight: "bold"
+        }),
+        haloColor: [0, 0, 0, 0.9],
+        haloSize: 1,
+        horizontalAlignment: "center",
+        text: t,
+        verticalAlignment: "middle"
+      })
+    });
+  }
+  _attachTileLabel(e, t) {
+    if (this._tileLabelGraphics.has(t))
+      return;
+    const o = this._createTileLabelGraphic(e, t);
+    this._tileLabelGraphics.set(t, o), this._currentGraphicsStore.add(o), this.addGraphic(o);
+  }
+  _detachTileLabel(e) {
+    const t = this._tileLabelGraphics.get(e);
+    t && (this.removeGraphic(t), this._currentGraphicsStore.remove(t), this._tileLabelGraphics.delete(e));
+  }
+  async _updateTilesForCurrentView(e, t) {
+    const { base: o } = this;
+    if (!o)
+      return;
+    const { panoramicTileSource: i, heading: a, pitch: s, hfov: n, vfov: l } = e, d = [Math.max(1, this.view?.width ?? 1), Math.max(1, this.view?.height ?? 1)], m = i.planTiles({
+      heading: a,
+      pitch: s,
+      hfov: n,
+      vfov: l,
+      imageSize: i.imageSize,
+      viewportSize: d
+    });
+    if (z(t), i.cancelStaleInflight(m.desiredKeySet), m.toDrop.length > 0) {
+      const p = new Set(m.toDrop);
+      for (const u of p) {
+        const { level: _, row: g, col: w } = this._parseTileKey(u);
+        i.unloadComponent(_, g, w), i.markTileDropped(u), this._detachTileLabel(u), this.tileCache.delete(u);
+      }
+    }
+    const c = async (p) => {
+      if (p >= m.toFetch.length)
+        return;
+      const u = m.toFetch[p];
+      if (z(t), !this.tileCache.has(u)) {
+        const { level: _, row: g, col: w } = this._parseTileKey(u), v = new AbortController(), y = () => {
+          v.abort();
+        };
+        t.addEventListener("abort", y, { once: !0 }), i.markTileInflight(u, v);
+        try {
+          const f = await i.fetchTileImageData(_, g, w, v.signal);
+          z(t), m.desiredKeySet.has(u) && !this.tileCache.has(u) && (i.loadComponent(_, g, w, f), i.markTileLoaded(u), this._attachTileLabel(i, u), this.tileCache.add(u));
+        } catch (f) {
+          ye(f) || Re("error", this, "Failed loading panoramic tile component", { detail: { key: u, error: f } });
+        } finally {
+          t.removeEventListener("abort", y), i.markTileInflightResolved(u);
+        }
+      }
+      await c(p + 1);
+    };
+    await c(0);
+    const h = i.planTiles({
+      heading: a,
+      pitch: s,
+      hfov: n,
+      vfov: l,
+      imageSize: i.imageSize,
+      viewportSize: d
+    });
+    if (z(t), h.toDrop.length > 0) {
+      const p = new Set(h.toDrop);
+      for (const u of p) {
+        const { level: _, row: g, col: w } = this._parseTileKey(u);
+        i.unloadComponent(_, g, w), i.markTileDropped(u), this._detachTileLabel(u), this.tileCache.delete(u);
+      }
+    }
+  }
+  async _loadMediaInternal(e, t) {
+    if (this._loading = !0, this._clearImage(), !e)
+      throw new Error("No media provided");
+    const { mesh: o } = await e.load(t).finally(() => {
+      this._loading = !1;
+    });
+    z(t), this._fov = Pe(Ge, this.el.clientWidth / this.el.clientHeight), this._base = Be(o), this.addGraphic(this._base);
+  }
+  render() {
+    return Z`<calcite-panel .loading=${this.hideLoader ? void 0 : this._loading} .heading=${this.hideTitle ? void 0 : this._messages.title}><arcgis-scene .environment=${this.#e} hide-attribution .spatialReference=${H.WebMercator} viewing-mode=local .ground=${this._ground} @arcgisViewMouseWheel=${this._handleMouseWheel} ${q(this._internalMap)}><arcgis-oriented-imagery-viewer-panoramic-viewer-zoom .hidden=${this.hideZoomControls} slot=top-left ${q(this._internalZoom)}></arcgis-oriented-imagery-viewer-panoramic-viewer-zoom></arcgis-scene>${this.hideVideoControls || this.media?.type !== "video" ? null : Z`<arcgis-oriented-imagery-viewer-video-controls .videoRef=${this._media?.element}></arcgis-oriented-imagery-viewer-video-controls>`}</calcite-panel>`;
+  }
+}
+re("arcgis-oriented-imagery-viewer-panoramic-viewer", at);
+export {
+  at as ArcgisOrientedImageryViewerPanoramicViewer
+};