@arcgis/map-components/dist/components/arcgis-slice/customElement.js

ArcGIS Map Components

import { c as $ } from "../../chunks/runtime.js";
import { html as r } from "lit-html";
import { usePropertyChange as w } from "@arcgis/lumina/controllers";
import { LitElement as L, createEvent as b, noShadowRoot as S, safeClassMap as a, nothing as M } from "@arcgis/lumina";
import { css as E } from "@lit/reactive-element/css-tag.js";
import { m as C } from "../../chunks/useViewModel.js";
import { A as k } from "../../chunks/AnalysisViewModel.js";
import V from "@arcgis/core/analysis/SliceAnalysis.js";
import { property as h, subclass as G } from "@arcgis/core/core/accessorSupport/decorators.js";
import { u as A } from "../../chunks/useT9n.js";
import { ignoreAbortErrors as T } from "@arcgis/core/core/promiseUtils.js";
import { H as D } from "../../chunks/heading.js";
import { g as f } from "../../chunks/globalCss.js";
import { watch as H } from "@arcgis/core/core/reactiveUtils.js";
/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
See https://js.arcgis.com/4.33/esri/copyright.txt for details.
v4.33.16 */
const O = E`@layer{arcgis-slice{display:block}.arcgis-slice__container{display:flex;padding:var(--esri-widget-padding-y) var(--esri-widget-padding-x);overflow-y:auto;--layer-item-background: var(--calcite-color-foreground-2)}.arcgis-slice__error{color:var(--calcite-color-status-danger)}.arcgis-slice__container,.arcgis-slice__hint{display:flex;flex-direction:column;gap:var(--calcite-spacing-md)}.arcgis-slice__error,.arcgis-slice__hint{overflow:hidden;animation:arcgis-slice-fade-in .25s ease-in-out}.arcgis-slice__error p,.arcgis-slice__hint p{margin:0;padding:0}.arcgis-slice__hint:not(:has(*)){display:none}.arcgis-slice__layer-item{--calcite-color-foreground-2: var(--layer-item-background);--calcite-color-foreground-1: var(--layer-item-background)}.arcgis-slice__actions{display:flex;flex-flow:column;gap:var(--calcite-spacing-xxs);justify-content:center}.arcgis-slice__actions:not(:has(*)){display:none}@keyframes arcgis-slice-fade-in{0%{opacity:0}25%{opacity:0}to{opacity:1}}}`;
var B = Object.defineProperty, P = Object.getOwnPropertyDescriptor, o = (e, i, t, d) => {
  for (var c = d > 1 ? void 0 : d ? P(i, t) : i, u = e.length - 1, y; u >= 0; u--)
    (y = e[u]) && (c = (d ? y(i, t, c) : y(c)) || c);
  return d && c && B(i, t, c), c;
};
const g = /* @__PURE__ */ new Set();
let n = class extends k {
  constructor() {
    super(...arguments), this.supportedViewType = "3d", this.unsupportedErrorMessage = "SliceViewModel is only supported in 3D views.";
  }
  async pickLayerToExclude() {
    const e = this.analysisView;
    if (e) {
      const i = super.start((t) => e.pickLayerToExclude(t));
      this._excludingLayers = i, i.finally(() => {
        this._excludingLayers === i && (this._excludingLayers = void 0);
      }), await i.catch();
    }
  }
  async place(e) {
    await this.analysisView?.place(e);
  }
  clearAnalysis() {
    this.analysis.shape = null;
  }
  initialize() {
    g.add(this);
  }
  destroy() {
    g.delete(this);
  }
  get state() {
    return this.disabled || !this.ready ? "disabled" : this._excludingLayers ? "excludingLayer" : this.operationState === "active" ? "slicing" : this.analysis.valid ? "sliced" : "ready";
  }
  get shape() {
    return this.analysis.shape;
  }
  set shape(e) {
    this.analysis.shape = e;
  }
  get tiltEnabled() {
    return this.analysis.tiltEnabled;
  }
  set tiltEnabled(e) {
    this.analysis.tiltEnabled = e;
  }
  get excludedLayers() {
    return this.analysis.excludedLayers;
  }
  set excludedLayers(e) {
    this.analysis.excludedLayers = e;
  }
  get excludeGroundSurface() {
    return this.analysis.excludeGroundSurface;
  }
  set excludeGroundSurface(e) {
    this.analysis.excludeGroundSurface = e;
  }
  async start() {
    g.forEach((e) => {
      e.view === this.view && e !== this && e.clear();
    }), this.clear(), await super.start();
  }
  onConnectToAnalysisView(e) {
    e.active = !0;
  }
  constructAnalysis() {
    return new V();
  }
};
o([
  h()
], n.prototype, "_excludingLayers", 2);
o([
  h({ readOnly: !0 })
], n.prototype, "state", 1);
o([
  h()
], n.prototype, "shape", 1);
o([
  h()
], n.prototype, "tiltEnabled", 1);
o([
  h()
], n.prototype, "excludedLayers", 1);
o([
  h()
], n.prototype, "excludeGroundSurface", 1);
n = o([
  G("esri.components.Slice.SliceViewModel")
], n);
const l = "arcgis-slice", s = {
  base: l,
  actions: `${l}__actions`,
  cancelButton: `${l}__cancel-button`,
  container: `${l}__container`,
  error: `${l}__error`,
  excludeButton: `${l}__exclude-button`,
  hint: `${l}__hint`,
  hintText: `${l}__hint-text`,
  layerItem: `${l}__layer-item`,
  layerList: `${l}__layer-list`,
  layerListHeading: `${l}__layer-list-title`,
  newSliceButton: `${l}__clear-button`
}, I = C(n);
class N extends L {
  constructor() {
    super(...arguments), this.viewModel = I(this), this._messages = A(), this._onNewSliceClick = () => {
      T(this.viewModel.start());
    }, this.analysis = this.viewModel.analysis, this.autoDestroyDisabled = !1, this.excludeGroundSurface = this.viewModel.excludeGroundSurface, this.excludedLayers = this.viewModel.excludedLayers, this.headingLevel = 3, this.icon = "slice", this.position = "bottom-left", this.shape = this.viewModel.shape, this.state = this.viewModel.state, this.tiltEnabled = this.viewModel.tiltEnabled, this.arcgisPropertyChange = w()("analysis", "state"), this.arcgisReady = b();
  }
  static {
    this.properties = { _hasVoxelLayers: 16, analysis: 0, autoDestroyDisabled: 5, excludeGroundSurface: 5, excludedLayers: 0, headingLevel: 9, icon: 3, label: 1, messageOverrides: 0, position: 1, referenceElement: 1, shape: 0, state: 35, tiltEnabled: 5 };
  }
  static {
    this.shadowRootOptions = S;
  }
  static {
    this.styles = O;
  }
  get _hasVoxelLayers() {
    const i = this.viewModel?.view;
    return i != null ? i.allLayerViews.some((t) => (
      //@ts-expect-error type is missing on the base layerview interface
      t.type === "voxel-3d"
    )) : !1;
  }
  async clear() {
    this.viewModel.clear();
  }
  async destroy() {
    await this.manager.destroy();
  }
  async start() {
    this.viewModel.start();
  }
  load() {
    this.manager.onLifecycle(() => [
      H(() => this._renderContainerNode(), () => this.requestUpdate())
    ]);
  }
  render() {
    return r`<div class=${a({
      [s.base]: !0,
      [f.widget]: !0,
      [f.panel]: !0
    })} role=presentation>${this._renderContainerNode()}</div>`;
  }
  _renderContainerNode() {
    const i = this._messages, { state: t, visible: d, supported: c } = this.viewModel, u = t === "slicing" || t === "excludingLayer";
    if (!d || !c)
      return null;
    c || r`<div class=${a(s.container)}><div class=${a(s.error)}><p>${this._messages.unsupported}</p></div></div>`;
    const { excludedLayers: y } = this.viewModel, m = this.excludeGroundSurface, v = y.length > 0 || m, p = t === "disabled";
    return r`<div class=${a(s.container)}><div class=${a(s.hint)}>${t === "excludingLayer" ? r`<p class=${a(s.hintText)}>${i.excludeHint}</p>` : null}${t === "slicing" ? r`<p class=${a(s.hintText)}>${this._hasVoxelLayers ? i.voxelHint : i.hint}</p><p class=${a(s.hintText)}>${i.verticalHint}</p>` : null}</div>${!u && v ? r`<div class=${a(s.layerList)}>${D({ class: s.layerListHeading, level: this.headingLevel, children: i.excludedLayers })}${j({ layers: y.toArray(), excludeGroundSurface: m, onLayerClick: (x) => {
      this.excludedLayers.remove(x);
    }, onGroundClick: () => {
      this.excludeGroundSurface = !1;
    }, listLabel: i.excludedLayers, layerActionLabel: i.includeLayer, groundItemTitle: i.ground })}</div>` : null}<div class=${a(s.actions)}>${u ? null : r`<calcite-button class=${a(s.newSliceButton)} .disabled=${p} @click=${this._onNewSliceClick}>${i.newSlice}</calcite-button>`}${t === "sliced" ? r`<calcite-button appearance=outline-fill class=${a(s.excludeButton)} .disabled=${p} @click=${() => this.viewModel.pickLayerToExclude()}>${i.excludeLayer}</calcite-button>` : null}${t === "excludingLayer" ? r`<calcite-button appearance=outline-fill class=${a(s.cancelButton)} .disabled=${p} @click=${() => this.viewModel.stop()}>${i.cancel}</calcite-button>` : null}</div></div>`;
  }
}
function _(e) {
  return r`<calcite-list-item class=${a(s.layerItem)} data-testid=${`list-item-${e.uid}`} .label=${e.title ?? ""}><calcite-action icon=x @click=${e.onClick} scale=s slot=actions-end .text=${e.actionLabel} title=${e.actionLabel ?? M}></calcite-action></calcite-list-item>`;
}
function j(e) {
  const i = e.layers.map((t) => _({ uid: t.uid, title: t.title ?? "", onClick: () => e.onLayerClick(t), actionLabel: e.layerActionLabel }));
  return e.excludeGroundSurface && i.push(_({ uid: "ground", title: e.groundItemTitle, onClick: e.onGroundClick, actionLabel: e.layerActionLabel })), r`<calcite-list .label=${e.listLabel} selection-mode=none>${i}</calcite-list>`;
}
$("arcgis-slice", N);
export {
  N as ArcgisSlice
};