@arcgis/map-components 5.2.0-next.65 → 5.2.0-next.67

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

@@ -0,0 +1,411 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as E } from "../../chunks/runtime.js";
+import { css as x, html as u } from "lit";
+import { LitElement as P } from "@arcgis/lumina";
+import { t as l } from "../../chunks/async-utils.js";
+import { property as h, subclass as C } from "@arcgis/core/core/accessorSupport/decorators.js";
+import * as M from "@arcgis/toolkit/log";
+import V from "@arcgis/core/core/Accessor.js";
+import w from "@arcgis/core/geometry/Extent.js";
+import "@arcgis/core/views/MapView.js";
+import b from "@arcgis/core/geometry/SpatialReference.js";
+import { watch as p } from "@arcgis/core/core/reactiveUtils.js";
+import { rotateDimensions as S, registerPanConstraint as F } from "@arcgis/core/applications/Components/OrientedImageryViewer/ImageViewer/utils.js";
+import H from "@arcgis/core/layers/support/TileInfo.js";
+import { u as L } from "../../chunks/useT9n.js";
+import "@arcgis/core/Graphic.js";
+import { G as z } from "../../chunks/graphicsLayerController.js";
+import { createRef as I, ref as T } from "lit/directives/ref.js";
+const O = x`:host{height:100%;--arcgis-view-color-focus: none}`, R = {
+  xmin: -150,
+  ymin: 1,
+  xmax: 20,
+  ymax: 80,
+  spatialReference: {
+    wkid: 4326
+  }
+}, g = 1e-6;
+function G(i, e) {
+  if (!e)
+    return null;
+  const t = i.width / 2, a = i.height / 2, r = e.xmin + t, s = e.xmax - t, o = e.ymin + a, c = e.ymax - a;
+  return r >= s || o >= c ? null : new w({
+    xmin: r,
+    xmax: s,
+    ymin: o,
+    ymax: c,
+    spatialReference: i.spatialReference
+  });
+}
+var N = Object.defineProperty, A = Object.getOwnPropertyDescriptor, d = (i, e, t, a) => {
+  for (var r = a > 1 ? void 0 : a ? A(e, t) : e, s = i.length - 1, o; s >= 0; s--)
+    (o = i[s]) && (r = (a ? o(e, t, r) : o(r)) || r);
+  return a && r && N(e, t, r), r;
+};
+let n = class extends V {
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  constructor(i) {
+    super(i), this.autoplay = !1, this.loop = !1, this.type = "image", this.autoLoad = !1;
+  }
+  static isNonPanoramicMedia(i) {
+    return !!i && typeof i == "object" && "declaredClass" in i && typeof i.declaredClass == "string" && i.declaredClass === "components.oriented-imagery-viewer.support.NonPanoramicMedia";
+  }
+  destroy() {
+    this._cache?.destroy(), this._cache = void 0, this._videoElement = void 0;
+  }
+  get layer() {
+    return this._cache;
+  }
+  get videoElement() {
+    return this._videoElement;
+  }
+  get size() {
+    if (!this._cache || this._cache.destroyed || this._cache.loadError)
+      return;
+    const { type: i } = this._cache;
+    if (i === "imagery-tile") {
+      const { serviceRasterInfo: e } = this._cache;
+      return e ? [e.width, e.height] : void 0;
+    }
+    if (i === "media") {
+      const e = this._videoElement ?? this._getVideoElementFromLayer(this._cache);
+      return !e || e.videoWidth <= 0 || e.videoHeight <= 0 ? void 0 : [e.videoWidth, e.videoHeight];
+    }
+  }
+  //---------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  //---------------------------------------------------------------------------
+  async load(i) {
+    return this.type === "video" ? await this._loadVideo(i) : await this._loadImage(i);
+  }
+  async _loadVideo(i) {
+    if (this._cache && !this._cache.destroyed && this._cache.type === "media")
+      return await this._cache.load(i), this._videoElement = this._getVideoElementFromLayer(this._cache) ?? this._videoElement, this._applyVideoPlaybackOptions(), { layer: this._cache, size: this.size };
+    const { title: e, url: t } = this;
+    if (!t)
+      throw new Error("URL is required to load NonPanoramicMedia.");
+    const a = (await import("@arcgis/core/geometry/Extent.js")).default, r = (await import("@arcgis/core/layers/support/ExtentAndRotationGeoreference.js")).default, s = (await import("@arcgis/core/layers/support/VideoElement.js")).default, o = (await import("@arcgis/core/layers/MediaLayer.js")).default;
+    l(i);
+    const c = new s({
+      video: t,
+      georeference: new r({
+        extent: new a(R)
+      })
+    });
+    await c.load(i), l(i), this._videoElement = c.content ?? void 0, this._applyVideoPlaybackOptions();
+    const m = new o({
+      source: c,
+      title: e
+    });
+    return await m.load(i), l(i), this._cache = m, { layer: this._cache, size: this.size };
+  }
+  _getVideoElementFromLayer(i) {
+    const e = i.source;
+    if (!e || !("content" in e))
+      return;
+    const { content: t } = e;
+    if (t instanceof HTMLVideoElement)
+      return t;
+  }
+  _applyVideoPlaybackOptions() {
+    const i = this._videoElement;
+    i && (i.autoplay = this.autoplay, i.loop = this.loop, this.autoplay || i.pause());
+  }
+  async _loadImage(i) {
+    if (this._cache && !this._cache.destroyed && this._cache.type === "imagery-tile")
+      return await this._cache.load(i), this._videoElement = void 0, { layer: this._cache, size: this.size };
+    const { url: e, customParameters: t } = this;
+    let a = this.datasetFormat;
+    if (!e)
+      throw new Error("URL is required to load NonPanoramicMedia.");
+    if (!a) {
+      const o = await import("../../chunks/urlUtils.js");
+      if (l(i), a = o.guessExtensionFromURI(e), !a) {
+        try {
+          a = await o.getDatasetFormat(e);
+        } catch {
+          M.log("warn", this, "Failed to determine dataset format from URL or response headers."), a = "UNKNOWN FORMAT";
+        }
+        l(i);
+      }
+    }
+    this.datasetFormat = a;
+    const r = (await import("@arcgis/core/layers/ImageryTileLayer.js")).default;
+    l(i);
+    const s = new r({
+      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: a
+      },
+      customParameters: t ?? void 0
+    });
+    return await s.load(i), l(i), this._videoElement = void 0, this._cache = s, { layer: this._cache, size: this.size };
+  }
+};
+d([
+  h()
+], n.prototype, "_cache", 2);
+d([
+  h()
+], n.prototype, "_videoElement", 2);
+d([
+  h()
+], n.prototype, "autoplay", 2);
+d([
+  h()
+], n.prototype, "loop", 2);
+d([
+  h()
+], n.prototype, "title", 2);
+d([
+  h()
+], n.prototype, "type", 2);
+d([
+  h()
+], n.prototype, "layer", 1);
+d([
+  h()
+], n.prototype, "videoElement", 1);
+d([
+  h()
+], n.prototype, "size", 1);
+d([
+  h()
+], n.prototype, "autoLoad", 2);
+d([
+  h()
+], n.prototype, "customParameters", 2);
+d([
+  h()
+], n.prototype, "datasetFormat", 2);
+d([
+  h()
+], n.prototype, "url", 2);
+n = d([
+  C("components.oriented-imagery-viewer.support.NonPanoramicMedia")
+], n);
+function W(i, e, t, a, r) {
+  const { width: s, height: o } = S(i, e, r);
+  return Math.max(s / t, o / a);
+}
+const $ = 96, U = 39.37, y = U * $;
+function v(i) {
+  const e = y * 0.25, t = y * i, a = [];
+  let r = t;
+  for (; r > e; )
+    a.push(r), r *= 0.5;
+  a.push(e);
+  const { lods: s } = H.create({
+    scales: a
+  });
+  return {
+    minScale: t,
+    lods: s
+  };
+}
+class j extends P {
+  constructor() {
+    super(...arguments), this._messages = L(), this.#t = new z(this), this._imageChanged = !1, this._internalMap = I(), this._loading = !1, this.hideHeader = !1, this.hideLoader = !1, this.hideZoomControls = !1, this.hideVideoControls = !1, this.rotation = 0;
+  }
+  static {
+    this.properties = { _imageChanged: 16, _internalMap: 16, _layer: 16, _videoTargetExtent: 16, _videoRef: 16, _loading: 16, _media: 16, hideHeader: 5, hideLoader: 5, hideZoomControls: 5, hideVideoControls: 5, messageOverrides: 0, media: 0, rotation: 9 };
+  }
+  static {
+    this.styles = [O];
+  }
+  #t;
+  #i;
+  #r;
+  #e;
+  #s;
+  #a;
+  get imageRenderer() {
+    return this._internalMap?.value?.view;
+  }
+  get map() {
+    return this.imageRenderer?.map;
+  }
+  get media() {
+    return this._media;
+  }
+  set media(e) {
+    if (!e) {
+      this.#i?.abort(), this._media = void 0, this._clearMedia();
+      return;
+    }
+    this._media = e instanceof n ? e : new n(e);
+  }
+  addGraphic(e) {
+    this.#t.addGraphic(e);
+  }
+  addGraphics(e) {
+    this.#t.addGraphics(e);
+  }
+  clearGraphics() {
+    this.#t.clearGraphics();
+  }
+  async mediaOnLoad() {
+    return this.#r && await this.#r, this._media;
+  }
+  removeGraphic(e) {
+    this.#t.removeGraphic(e);
+  }
+  removeGraphics(e) {
+    this.#t.removeGraphics(e);
+  }
+  loaded() {
+    this.manager.onLifecycle(() => [
+      this._createResizeConstraint(),
+      this._createRotationHandler(),
+      this._createPanConstraint(),
+      this._createVideoInteractionWatcher(),
+      {
+        remove: () => {
+          this._removeVideoPanHandles();
+        }
+      },
+      p(() => this._media, (e) => {
+        this.#i?.abort(), e && (this.#i = new AbortController(), this.#r = this._loadMediaInternal(e, this.#i));
+      }, {
+        initial: !0,
+        sync: !0
+      })
+    ]);
+  }
+  _createPanConstraint() {
+    return p(() => ({ layer: this._layer, imageRenderer: this.imageRenderer }), ({ layer: e, imageRenderer: t }) => {
+      this._media?.type !== "video" && (e?.type !== "imagery-tile" || !t?.ready || F(t, e));
+    }, { sync: !0, initial: !0 });
+  }
+  _createResizeConstraint() {
+    return p(() => {
+      if (!this.imageRenderer?.ready || !this._layer)
+        return;
+      if (this._layer.type === "imagery-tile") {
+        const { width: t, height: a } = this._layer.serviceRasterInfo, { width: r, height: s, rotation: o } = this.imageRenderer;
+        return W(t, a, r, s, o);
+      }
+      const e = this._videoTargetExtent;
+      if (!(!e || this.imageRenderer.width <= 0 || this.imageRenderer.height <= 0))
+        return Math.max(e.width / this.imageRenderer.width, e.height / this.imageRenderer.height);
+    }, (e) => {
+      if (!e || !this.imageRenderer)
+        return;
+      if (this._media?.type === "video") {
+        this._updateVideoScaleForResize(e);
+        return;
+      }
+      const { constraints: t, scale: a } = this.imageRenderer, r = t.minScale, { lods: s, minScale: o } = v(e);
+      t.set({
+        minScale: o,
+        lods: s
+      }), this.imageRenderer.scale = this._imageChanged || Math.abs(a - r) <= 1e-6 ? o : a, this._imageChanged = !1;
+    }, { sync: !0, initial: !0 });
+  }
+  _createVideoInteractionWatcher() {
+    return p(() => [this.imageRenderer?.interacting, this.imageRenderer?.navigating, this.imageRenderer?.scale], () => {
+      this._media?.type === "video" && this._updateVideoInteraction();
+    }, { initial: !0 });
+  }
+  _createRotationHandler() {
+    return p(() => this.rotation, (e) => {
+      this._media?.type !== "video" && this.imageRenderer && (this.imageRenderer.constraints.rotationEnabled = !0, this.imageRenderer.rotation = e, this.imageRenderer.constraints.rotationEnabled = !1);
+    }, { sync: !0, initial: !0 });
+  }
+  _clearMedia() {
+    this._removeVideoPanHandles(), this._restoreConstraints(), this.#e = void 0, this._videoTargetExtent = void 0, this._videoRef?.pause(), this._videoRef = void 0, this._layer && this.map?.layers.includes(this._layer) && this.map.layers.remove(this._layer), this._layer?.destroy(), this._layer = void 0;
+  }
+  async _loadMediaInternal(e, t) {
+    if (this._loading = !0, this._clearMedia(), !e)
+      throw new Error("No media provided");
+    const { layer: a } = await e.load(t).finally(() => {
+      this._loading = !1;
+    });
+    l(t), this._imageChanged = !0, this._layer = a, this.imageRenderer?.map?.layers.add(this._layer), e.type === "video" && await this._loadVideoMedia(e);
+  }
+  async _loadVideoMedia(e) {
+    const t = this.imageRenderer, a = new w(R), r = e.videoElement;
+    this._videoRef = r instanceof HTMLVideoElement ? r : void 0, t && (await t.when(), this._snapshotConstraints(), t.constraints.set({
+      rotationEnabled: !1
+    }), await t.goTo(a.clone(), { animate: !1 }), this._videoTargetExtent = t.extent?.clone(), this.#e = t.extent?.clone(), this._videoTargetExtent && t.width > 0 && t.height > 0 && this._updateVideoScaleForResize(Math.max(this._videoTargetExtent.width / t.width, this._videoTargetExtent.height / t.height))), this._updateVideoInteraction();
+  }
+  _snapshotConstraints() {
+    const e = this.imageRenderer?.constraints;
+    !e || this.#a || (this.#a = {
+      geometry: e.geometry?.clone() ?? null,
+      lods: e.lods,
+      maxScale: e.maxScale,
+      minScale: e.minScale,
+      rotationEnabled: e.rotationEnabled
+    });
+  }
+  _restoreConstraints() {
+    const e = this.imageRenderer?.constraints, t = this.#a;
+    !e || !t || (e.set({
+      geometry: t.geometry,
+      lods: t.lods,
+      maxScale: t.maxScale,
+      minScale: t.minScale,
+      rotationEnabled: t.rotationEnabled
+    }), this.#a = void 0);
+  }
+  _disablePan() {
+    const e = this.imageRenderer;
+    if (this._removeVideoPanHandles(), !e)
+      return;
+    const t = e.on("drag", (r) => r.stopPropagation()), a = e.on("key-down", (r) => {
+      r.key.startsWith("Arrow") && r.stopPropagation();
+    });
+    this.#s = [t, a];
+  }
+  _enablePan() {
+    this._removeVideoPanHandles();
+  }
+  _removeVideoPanHandles() {
+    this.#s?.forEach((e) => e.remove()), this.#s = void 0;
+  }
+  _updateVideoInteraction() {
+    const e = this.imageRenderer, t = e?.extent;
+    if (!e || !t || this._layer?.type !== "media")
+      return;
+    this.#e ??= t.clone();
+    const { minScale: a } = e.constraints;
+    if (!a)
+      return;
+    const r = e.scale < a - g, s = G(t, this._videoTargetExtent);
+    if (r && !!s) {
+      this._enablePan(), e.constraints.geometry = s;
+      return;
+    }
+    if (r) {
+      this._disablePan(), e.constraints.geometry = null;
+      return;
+    }
+    this.#e && !t.equals(this.#e) && (e.extent = this.#e.clone()), this._disablePan(), e.constraints.geometry = null;
+  }
+  _updateVideoScaleForResize(e) {
+    if (!this.imageRenderer)
+      return;
+    const { constraints: t, scale: a } = this.imageRenderer, r = t.minScale, s = r != null && Math.abs(a - r) <= g, { lods: o, minScale: c } = v(e);
+    t.set({ lods: o, minScale: c, rotationEnabled: !1 }), this.imageRenderer.scale = this._imageChanged || s ? c : a, this._imageChanged = !1, s && requestAnimationFrame(() => {
+      const { extent: m, scale: _, constraints: f } = this.imageRenderer ?? {};
+      m && _ && f?.minScale != null && Math.abs(_ - f.minScale) <= g && (this.#e = m.clone());
+    });
+  }
+  render() {
+    return u`<calcite-panel .loading=${this.hideLoader ? void 0 : this._loading} .heading=${this.hideHeader ? void 0 : this._messages.title}><arcgis-map hide-attribution .spatialReference=${b.WebMercator} ${T(this._internalMap)}><arcgis-zoom .hidden=${this.hideZoomControls} .messageOverrides=${this.messageOverrides} slot=top-left></arcgis-zoom></arcgis-map>${this.hideVideoControls || this._media?.type !== "video" || !this._videoRef ? void 0 : u`<arcgis-oriented-imagery-viewer-video-controls .videoRef=${this._videoRef}></arcgis-oriented-imagery-viewer-video-controls>`}</calcite-panel>`;
+  }
+}
+E("arcgis-oriented-imagery-viewer-non-panoramic-viewer", j);
+export {
+  j as ArcgisOrientedImageryViewerNonPanoramicViewer
+};

package/dist/components/{arcgis-oriented-imagery-viewer-image-viewer → arcgis-oriented-imagery-viewer-non-panoramic-viewer}/index.js

@@ -1,4 +1,5 @@
 import "@esri/calcite-components/components/calcite-panel";
 import "../arcgis-map/index.js";
 import "../arcgis-zoom/index.js";
+import "../arcgis-oriented-imagery-viewer-video-controls/index.js";
 export * from "./customElement.js";

package/dist/components/{arcgis-oriented-imagery-viewer-image-viewer → arcgis-oriented-imagery-viewer-non-panoramic-viewer}/support/NonPanoramicMedia.d.ts

@@ -1,8 +1,9 @@
 import type ImageryTileLayer from "@arcgis/core/layers/ImageryTileLayer.js";
 import type Accessor from "@arcgis/core/core/Accessor.js";
+import type MediaLayer from "@arcgis/core/layers/MediaLayer.js";
 import type { AbortOptions } from "@arcgis/core/core/promiseUtils.js";
 
-export interface NonPanoramicMediaProperties extends Partial<Pick<NonPanoramicMedia, "autoLoad" | "customParameters" | "datasetFormat" | "url">> {}
+export interface NonPanoramicMediaProperties extends Partial<Pick<NonPanoramicMedia, "autoLoad" | "autoplay" | "customParameters" | "datasetFormat" | "loop" | "title" | "type" | "url">> {}
 
 /** @internal */
 export default class NonPanoramicMedia extends Accessor {
@@ -11,15 +12,23 @@ export default class NonPanoramicMedia extends Accessor {
   constructor(properties: NonPanoramicMediaProperties);
   /** @default false */
   accessor autoLoad: boolean;
+  /** @default false */
+  accessor autoplay: boolean;
   accessor customParameters: Record<string, string> | undefined;
   accessor datasetFormat: string | undefined;
-  get layer(): ImageryTileLayer | undefined;
+  get layer(): ImageryTileLayer | MediaLayer | undefined;
+  /** @default false */
+  accessor loop: boolean;
   get size(): [number, number] | undefined;
+  accessor title: string | undefined;
+  /** @default "image" */
+  accessor type: "image" | "video";
   accessor url: string | undefined;
+  get videoElement(): HTMLVideoElement | undefined;
   destroy(): void;
   /** @param options */
   load(options?: AbortOptions): Promise<{
-      layer: ImageryTileLayer;
+      layer: ImageryTileLayer | MediaLayer;
       size: [number, number] | undefined;
   }>;
 }