@arcgis/map-components/dist/components/arcgis-feature-image/customElement.js

ArcGIS Map Components

/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as l } from "../../chunks/runtime.js";
import s from "@arcgis/core/Graphic.js";
import { html as o } from "lit";
import { createRef as m, ref as g } from "lit/directives/ref.js";
import { LitElement as u, safeStyleMap as c } from "@arcgis/lumina";
import p from "@arcgis/core/symbols/SimpleFillSymbol.js";
import y from "@arcgis/core/symbols/SimpleLineSymbol.js";
import d from "@arcgis/core/symbols/SimpleMarkerSymbol.js";
import * as n from "@arcgis/toolkit/log";
import { previewGraphic as i } from "@arcgis/core/applications/Components/symbolUtils.js";
const f = new p(), I = new y(), _ = new d();
function b(a) {
  if (!a)
    return null;
  switch (a.geometryType) {
    case "multipoint":
    case "point":
      return _;
    case "polygon":
      return f;
    case "polyline":
      return I;
    default:
      return null;
  }
}
class S extends u {
  constructor() {
    super(...arguments), this._lastRun = 0, this._attempted = !1, this._isCurrentlyInView = !1, this._io = null, this._imageContainerDiv = m(), this._generatedImageData = null, this.useTrueShape = !1, this.widthInPixels = 16, this.heightInPixels = 16;
  }
  static {
    this.properties = { _generatedImageData: 16, graphic: 0, layer: 0, tableSymbolIcon: 0, minWidth: 9, useTrueShape: 5, actualSymbol: 0, widthInPixels: 9, heightInPixels: 9 };
  }
  get rootLayer() {
    return this.layer?.type === "subtype-sublayer" ? this.layer.parent : this.layer;
  }
  loaded() {
    this.manager.onLifecycle(() => (this._addIntersectionObserver(), () => {
      this._removeIntersectionObserver();
    }));
  }
  willUpdate(e) {
    e.has("graphic") && (this.hasUpdated || this.graphic !== null) && this._changeGraphic();
  }
  updated() {
    !this._attempted && this._isCurrentlyInView && (this._attempted = !0, this._handleImage().catch((e) => {
      n.log("warn", this, "Failed processing image");
    }));
  }
  _changeGraphic() {
    this._changeData();
  }
  _changeData() {
    this._generatedImageData = null, this._attempted = !1;
  }
  async _generateImage() {
    return this.actualSymbol && this.graphic?.geometry && this.useTrueShape && !this.layer ? await i(new s({
      attributes: this.graphic.attributes,
      geometry: this.graphic.geometry
    }), {
      format: "string",
      widthInPixels: this.widthInPixels,
      heightInPixels: this.heightInPixels,
      useGeometryForShape: this.useTrueShape,
      fallbackSymbol: this.actualSymbol
    }) : this.actualSymbol ? await i(null, {
      format: "string",
      widthInPixels: this.widthInPixels,
      heightInPixels: this.heightInPixels,
      useGeometryForShape: !1,
      fallbackSymbol: this.actualSymbol
    }) : this.layer && this.graphic ? this.rootLayer.isTable ? this.tableSymbolIcon ? await i(null, {
      format: "string",
      widthInPixels: this.widthInPixels,
      heightInPixels: this.heightInPixels,
      useGeometryForShape: !1,
      fallbackSymbol: this.tableSymbolIcon
    }) : "" : this.useTrueShape ? this.graphic.geometry ? await this._generatePreviewGraphic() : "" : await this._generatePreviewGraphic() : "";
  }
  async _generatePreviewGraphic() {
    return await i(new s({
      attributes: this.graphic.attributes,
      geometry: this.graphic.geometry,
      layer: this.layer
    }), {
      format: "string",
      widthInPixels: this.widthInPixels,
      heightInPixels: this.heightInPixels,
      useGeometryForShape: this.useTrueShape,
      fallbackSymbol: b(this.layer)
    });
  }
  async _handleImage() {
    const e = ++this._lastRun;
    if (!this._generatedImageData || this._generatedImageData === "")
      try {
        const t = await this._generateImage();
        if (this._lastRun !== e || this._generatedImageData === t)
          return;
        this._generatedImageData = t;
      } finally {
        this._attempted = !0;
      }
  }
  _addIntersectionObserver() {
    const e = {
      // If the image gets within 50px in the Y axis, start the download.
      rootMargin: "50px 0px",
      threshold: 0.01
    };
    this._imageContainerDiv.value && requestAnimationFrame(() => {
      this.isConnected && (this._io = new IntersectionObserver((t) => {
        let r = !1;
        t.forEach((h) => {
          h.intersectionRatio > 0 && !r ? (r = !0, this._isCurrentlyInView = !0, this._handleImage().catch((w) => {
            n.log("warn", this, "Failed processing image");
          })) : this._isCurrentlyInView = !1;
        });
      }, e), this._io?.observe(this._imageContainerDiv.value));
    });
  }
  _removeIntersectionObserver() {
    this._io?.disconnect(), this._io = null;
  }
  _generateInnerHTML() {
    return this._generatedImageData ? this._generatedImageData.startsWith("<") ? this._generatedImageData : `
            <img
                alt=''
                src=${this._generatedImageData}
                style="width: 100%;" >
            </img>
            ` : "";
  }
  render() {
    const e = this._generateInnerHTML();
    return o`<div style=${c(this.minWidth ? { "min-width": `${this.minWidth.toString()}px` } : {})} .innerHTML=${e ?? ""} ${g(this._imageContainerDiv)}></div>`;
  }
}
l("arcgis-feature-image", S);
export {
  S as ArcgisFeatureImage
};