@arcgis/map-components 5.0.0-next.17 → 5.0.0-next.170

package/dist/components/arcgis-feature-image/customElement.js

@@ -0,0 +1,143 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.0/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
+};