@arcgis/map-components
Version:
ArcGIS Map Components
103 lines (102 loc) • 5.17 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as r } from "../../chunks/runtime.js";
import { getGoToDuration as n } from "@arcgis/core/applications/Components/navigationDuration.js";
import { watch as e } from "@arcgis/core/core/reactiveUtils.js";
import { LitElement as c, createEvent as l, nothing as o, safeClassMap as h, safeStyleMap as d } from "@arcgis/lumina";
import { usePropertyChange as u } from "@arcgis/lumina/controllers";
import { classes as m } from "@arcgis/toolkit/dom";
import { css as g, html as p } from "lit";
import { u as v } from "../../chunks/useT9n.js";
import { u as f } from "../../chunks/useView.js";
import { g as w } from "../../chunks/globalCss.js";
import { c as y } from "../../chunks/utils.js";
import { c as s } from "../../chunks/goTo.js";
const b = g`.arcgis-button{--calcite-icon-color: var(--calcite-color-text-3);--calcite-button-background-color: var(--calcite-color-foreground-1);color:var(--calcite-color-text-3);line-height:var(--calcite-font-line-height-relative-tight);calcite-button{--calcite-offset-invert-focus: 1}display:flex;flex-flow:column;cursor:pointer;background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size);:hover{--calcite-icon-color: var(--calcite-color-text-1);--calcite-button-background-color: var(--calcite-color-transparent-hover)}}:host{calcite-button{width:var(--calcite-spacing-xxxl);height:var(--calcite-spacing-xxxl)}}:host([visual-scale="l"]){calcite-button{width:calc(var(--calcite-spacing-xxxl) + var(--calcite-spacing-md));height:calc(var(--calcite-spacing-xxxl) + var(--calcite-spacing-md))}}:host([visual-scale="s"]){calcite-button{width:var(--calcite-spacing-xxl);height:var(--calcite-spacing-xxl)}}.root{border-radius:50%;box-shadow:var(--arcgis-internal-box-shadow, none)}.icon-container{justify-content:center;display:flex;position:absolute;transform:translate(-50%,-50%)}.icon-container:dir(rtl){transform:translate(50%,-50%)}`;
class x extends c {
constructor() {
super(...arguments), this._hasInitializedOrientation = !1, this._hasInitializedState = !1, this._lastState = "disabled", this.messages = v(), this._orientation = {
x: 0,
y: 0,
z: 0
}, this.view = f(this), this.autoDestroyDisabled = !1, this.visualScale = "m", this.arcgisPropertyChange = u()("state", "orientation"), this.arcgisReady = l();
}
static {
this.properties = { _orientation: 16, view: 0, autoDestroyDisabled: 5, canShowNorth: 32, goToOverride: 0, icon: 3, label: 1, messageOverrides: 0, orientation: 32, referenceElement: 1, state: 32, visualScale: 3 };
}
static {
this.styles = b;
}
get canShowNorth() {
return y(this.view);
}
get icon() {
return this._icon ?? (this.state === "rotation" ? "arrow-up" : "compass-needle");
}
set icon(t) {
this._icon = t;
}
get orientation() {
return this._orientation;
}
get state() {
return !this.view?.ready || this.view.type === "2d" && !this.view.constraints.rotationEnabled ? "disabled" : this.canShowNorth ? "compass" : "rotation";
}
async destroy() {
await this.manager.destroy();
}
async reset() {
const { view: t } = this;
t?.ready && (t?.type === "2d" ? s({
target: { rotation: 0 },
options: { animationMode: "always", duration: n() }
}, t, this.goToOverride) : s({ target: { heading: 0 } }, t, this.goToOverride));
}
updated(t) {
t.has("_orientation") && (this._hasInitializedOrientation ? this.arcgisPropertyChange.emit({ name: "orientation" }) : this._hasInitializedOrientation = !0);
const i = this.state;
this._hasInitializedState ? i !== this._lastState && this.arcgisPropertyChange.emit({ name: "state" }) : this._hasInitializedState = !0, this._lastState = i;
}
loaded() {
if (!this.view) {
this.manager.onLifecycle(() => [
e(() => this.view?.ready, () => {
this._watchRotationOrCamera();
}, { once: !0 })
]);
return;
}
this._watchRotationOrCamera();
}
_watchRotationOrCamera() {
if (!this.view)
return;
const t = [];
this.view.type === "2d" ? t.push(e(() => this.view?.rotation, (i) => this._updateForRotation(i), { initial: !0 })) : t.push(e(() => this.view?.camera, (i) => this._updateForCamera(i), { initial: !0 })), this.manager.onLifecycle(() => t);
}
_updateForRotation(t) {
t != null && (this._orientation = {
z: t
});
}
_updateForCamera(t) {
if (!t)
return;
const i = -t.heading;
this._orientation = {
x: 0,
y: 0,
z: i
};
}
render() {
const { messages: t, icon: i } = this;
return p`<div class=${h(m("root", w.arcgisButton))}><calcite-button .disabled=${this.state === "disabled"} kind=neutral .label=${t.reset} =${this.reset} round .scale=${this.visualScale} title=${t.reset ?? o}><div aria-hidden=true class="icon-container" title=${t.reset ?? o}><calcite-icon .scale=${this.visualScale} .icon=${i} style=${d(_(this.orientation))}></calcite-icon></div></calcite-button></div>`;
}
}
const _ = (a) => ({
transform: `rotateZ(${a.z}deg)`
});
r("arcgis-compass", x);
export {
x as ArcgisCompass
};