@arcgis/map-components
Version:
ArcGIS Map Components
140 lines (139 loc) • 5.73 kB
JavaScript
import { c as C } from "../../chunks/runtime.js";
import { ref as g } from "lit-html/directives/ref.js";
import { html as u } from "lit-html";
import { classes as d } from "@arcgis/components-utils";
import { getDefaultUnitForView as w } from "@arcgis/core/applications/Components/getDefaultUnits.js";
import { watch as y } from "@arcgis/core/core/reactiveUtils.js";
import { formatNumber as S } from "@arcgis/core/intl.js";
import L from "@arcgis/core/widgets/ScaleBar/ScaleBarViewModel.js";
import { LitElement as B, createEvent as M, noShadowRoot as R, safeClassMap as a, safeStyleMap as _ } from "@arcgis/lumina";
import { u as x } from "../../chunks/useT9n.js";
import { m as D } from "../../chunks/useViewModel.js";
import { g as v } from "../../chunks/globalCss.js";
/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
See https://js.arcgis.com/4.32/esri/copyright.txt for details.
v4.32.13 */
function $(f = 0, e = 0) {
return { x: f, y: e };
}
const r = "esri-scale-bar", t = {
base: r,
labelContainer: `${r}__label-container`,
rulerLabelContainer: `${r}__label-container--ruler`,
lineLabelContainer: `${r}__label-container--line`,
topLabelContainer: `${r}__label-container--top`,
bottomLabelContainer: `${r}__label-container--bottom`,
label: `${r}__label`,
line: `${r}__line`,
topLine: `${r}__line--top`,
bottomLine: `${r}__line--bottom`,
ruler: `${r}__ruler`,
rulerBlock: `${r}__ruler-block`,
barContainer: `${r}__bar-container`,
rulerBarContainer: `${r}__bar-container--ruler`,
lineBarContainer: `${r}__bar-container--line`
}, U = D(L);
class k extends B {
constructor() {
super(...arguments), this._defaultUnit = "metric", this.messages = x(), this._scaleComputedFrom = $(), this.viewModel = U(this), this.autoDestroyDisabled = !1, this.barStyle = "line", this.icon = "actual-size", this.position = "top-left", this.arcgisReady = M();
}
static {
this.properties = { autoDestroyDisabled: 5, barStyle: 1, icon: 3, label: 1, messageOverrides: 0, position: 3, referenceElement: 1, unit: 1 };
}
static {
this.shadowRootOptions = R;
}
/**
* Units to use for the scale bar.
* When using `dual`, the scale bar displays both metric and imperial units.
* When metric, distances will be shown in either kilometers, meters, centimeters, or millimeters depending on the scale. Similarly, imperial
* units will be shown in either miles, feet, or inches.
*/
get unit() {
return this._unit ?? this._defaultUnit;
}
set unit(e) {
this._unit = e;
}
// #endregion
// #region Public Methods
/** Permanently destroy the component */
async destroy() {
await this.manager.destroy();
}
// #endregion
// #region Lifecycle
updated() {
this._handleRootCreateOrUpdate();
}
loaded() {
this.manager.onLifecycle(() => y(() => {
const e = this.viewModel.view;
return {
defaultUnit: e ? w(e) : void 0,
stationary: e?.stationary,
center: e?.center,
scale: e?.scale,
zoom: e?.zoom
};
}, ({ defaultUnit: e, stationary: i }) => {
this._defaultUnit = e ?? "metric", i && this.requestUpdate();
}));
}
// #endregion
// #region Private Methods
_handleContainerRef(e) {
e !== void 0 && this._handleRootCreateOrUpdate();
}
_handleRootCreateOrUpdate() {
if (!this.viewModel)
return;
const e = this._scaleComputedFrom, i = this.el.getBoundingClientRect(), s = i.left + window.pageXOffset, l = i.top + window.pageYOffset, n = $(s, l);
(n.x !== e.x || n.y !== e.y) && (this._scaleComputedFrom = n);
}
_formatDistance(e, i) {
return S(e, {
style: "unit",
unit: i,
unitDisplay: "short"
});
}
// #endregion
// #region Rendering
render() {
const e = this.viewModel.state === "disabled", i = {
[v.disabled]: e
};
let s, l;
if (!e) {
const { unit: n, barStyle: c } = this, p = n === "imperial" || n === "dual", b = n === "metric" || n === "dual", m = 100, h = n === "dual" ? "line" : c;
if (p) {
const o = this.viewModel.getScaleBarProperties(m, "imperial");
o && (l = h === "ruler" ? this._renderRuler(o) : this._renderLine(o, "bottom"));
}
if (b) {
const o = this.viewModel.getScaleBarProperties(m, "metric");
o && (s = h === "ruler" ? this._renderRuler(o) : this._renderLine(o, "top"));
}
}
return u`<div class=${a(d(t.base, v.widget, i))} ${g(this._handleContainerRef)}>${s}${l}</div>`;
}
_renderRuler(e) {
const { length: i, unit: s, value: l } = e, n = Math.round(i), c = this._formatDistance(l, s);
return u`<div class=${a(d(t.barContainer, t.rulerBarContainer))}><div class=${a(t.ruler)} style=${_({ width: `${n}px` })}><div class=${a(t.rulerBlock)}></div><div class=${a(t.rulerBlock)}></div><div class=${a(t.rulerBlock)}></div><div class=${a(t.rulerBlock)}></div></div><div class=${a(d(t.labelContainer, t.rulerLabelContainer))}><div class=${a(t.label)}>0</div><div class=${a(t.label)}>${c}</div></div></div>`;
}
_renderLine(e, i) {
const { length: s, unit: l, value: n } = e, c = Math.round(s), p = this._formatDistance(n, l), b = {
[t.topLabelContainer]: i === "top",
[t.bottomLabelContainer]: i === "bottom"
}, m = u`<div class=${a(d(t.labelContainer, t.lineLabelContainer, b))}><div class=${a(t.label)}>${p}</div></div>`, h = {
[t.topLine]: i === "top",
[t.bottomLine]: i === "bottom"
}, o = u`<div class=${a(d(t.line, h))} style=${_({ width: `${c}px` })}></div>`;
return u`<div class=${a(d(t.barContainer, t.lineBarContainer))}>${[o, m]}</div>`;
}
}
C("arcgis-scale-bar", k);
export {
k as ArcgisScaleBar
};