@arcgis/map-components 5.0.0-next.98 → 5.0.0

package/dist/components/arcgis-feature-image/customElement.d.ts

@@ -0,0 +1,51 @@
+/// <reference path="../../index.d.ts" />
+import type Graphic from "@arcgis/core/Graphic.js";
+import type FeatureLayer from "@arcgis/core/layers/FeatureLayer.js";
+import type SubtypeGroupLayer from "@arcgis/core/layers/SubtypeGroupLayer.js";
+import type SubtypeSublayer from "@arcgis/core/layers/support/SubtypeSublayer.js";
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { GeometryUnion } from "@arcgis/core/geometry/types.js";
+import type { SymbolUnion } from "@arcgis/core/symbols/types.js";
+
+/**
+ * The Feature Image component generates a feature swatch representing a
+ * Feature.
+ * The component can be configured to only generate a swatch, when the element
+ * is within the visible scope of the page.
+ *
+ * @since 5.0
+ * @internal
+ */
+export abstract class ArcgisFeatureImage extends LitElement {
+  /** Specifies a symbol. In this mode, the swatch will simply be this symbols preview. */
+  accessor actualSymbol: SymbolUnion | undefined;
+  /** The graphic to generate the swatch for. */
+  accessor graphic: Graphic | {
+      geometry?: GeometryUnion;
+      attributes: Record<string, unknown>;
+      layer: FeatureLayer;
+  } | undefined;
+  /**
+   * The generated thumbnail height
+   *
+   * @default 16
+   */
+  accessor heightInPixels: number;
+  /** The layer to which the graphic belongs. This will be used to get the symbol for the feature (using the layer's renderer) */
+  accessor layer: FeatureLayer | SubtypeGroupLayer | SubtypeSublayer | undefined;
+  accessor minWidth: number | undefined;
+  /** Symbol to use, if the layer is a Table */
+  accessor tableSymbolIcon: SymbolUnion | undefined;
+  /**
+   * Specifies whether to use the shape of the feature. If set to false, then a simple symbol swatch will be used.
+   *
+   * @default false
+   */
+  accessor useTrueShape: boolean;
+  /**
+   * The generated thumbnail width
+   *
+   * @default 16
+   */
+  accessor widthInPixels: number;
+}

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
+};