@arcgis/map-components
Version:
ArcGIS Map Components
121 lines (120 loc) • 8.1 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as l } from "../../chunks/runtime.js";
import { css as d, html as i } from "lit";
import { ref as h } from "lit/directives/ref.js";
import { keyed as s } from "lit/directives/keyed.js";
import { usePropertyChange as u } from "@arcgis/lumina/controllers";
import { focusElement as p } from "@arcgis/toolkit/dom";
import { watch as m } from "@arcgis/core/core/reactiveUtils.js";
import b from "@arcgis/core/widgets/DirectionalPad/DirectionalPadViewModel.js";
import { LitElement as g, createEvent as v, safeClassMap as f, nothing as a, safeStyleMap as w } from "@arcgis/lumina";
import { u as _ } from "../../chunks/useT9n.js";
import { m as $ } from "../../chunks/useViewModel.js";
import { g as R } from "../../chunks/component-utils.js";
import { g as r } from "../../chunks/globalCss.js";
import { f as C, c as x } from "../../chunks/utils.js";
const c = [-45, 0, 45, -90, 90, -135, 180, 135], y = {
0: { label: "north", iconName: "chevron-up" },
45: { label: "northEast", iconName: "chevron-up-right" },
90: { label: "east", iconName: "chevron-right" },
135: { label: "southEast", iconName: "chevron-down-right" },
180: { label: "south", iconName: "chevron-down" },
"-135": { label: "southWest", iconName: "chevron-down-left" },
"-90": { label: "west", iconName: "chevron-left" },
"-45": { label: "northWest", iconName: "chevron-up-left" }
}, M = d`:host{outline:none;box-shadow:none!important;background-color:transparent!important;user-select:none;calcite-action-pad{display:contents}calcite-action-group{touch-action:none}calcite-action{aspect-ratio:1}}.root{display:flex;flex-direction:column;gap:var(--calcite-spacing-sm)}.buttons-container{--calcite-color-background: transparent;--calcite-action-group-gap: 0;calcite-action{--calcite-color-focus: var(--calcite-color-foreground-3)}calcite-action:not([active]){--calcite-action-background-color-press: var(--calcite-color-foreground-1)}calcite-action[active]{--calcite-action-background-color: var(--calcite-color-foreground-3)}calcite-icon{transform:var(--rotation, unset)}{calcite-action{--calcite-action-background-color-hover: var(--calcite-color-foreground-1);--calcite-action-text-color-press: var(--calcite-color-text-3)}}}.rotation-container{display:block;width:100%;calcite-action{flex:.3}}.rotation-slider-container{display:flex;flex:1;align-items:center;calcite-slider{flex:1;padding-inline:var(--calcite-spacing-xxs)}}`, S = $(b);
class B extends g {
constructor() {
super(...arguments), this.messages = _({}), this._onContextMenu = (t) => t.preventDefault(), this._buttons = {}, this.viewModel = S(this), this.angle = this.viewModel.angle, this.rotation = this.viewModel.rotation, this.view = this.viewModel.view, this.autoDestroyDisabled = !1, this.disabled = this.viewModel.disabled, this.hideDirectionalButtons = !1, this.icon = "move", this.showRotationResetButton = !1, this.showRotationSlider = !1, this.state = this.viewModel.state, this.visualScale = "s", this.arcgisPropertyChange = u()("state"), this.arcgisReady = v();
}
static {
this.properties = { _rotationEnabled: 16, angle: 16, rotation: 16, view: 0, autoDestroyDisabled: 5, disabled: 5, hideDirectionalButtons: 5, icon: 1, label: 1, messageOverrides: 0, referenceElement: 1, showRotationResetButton: 5, showRotationSlider: 5, state: 32, visualScale: 1 };
}
static {
this.styles = M;
}
get _rotationEnabled() {
return this.view?.ready ? this.view.constraints.rotationEnabled ?? !1 : !0;
}
async destroy() {
await this.manager.destroy();
}
loaded() {
this.manager.onLifecycle(() => [
// Move focus when movement angle changed by touch/mouse (not keyboard!)
m(() => this.viewModel.angle, () => {
this._buttonsContainer?.contains(document.activeElement) && (this.viewModel.angle == null ? R(this)?.focus() : p(this._buttons[this.viewModel.angle]));
})
]);
}
_rotateIcon(t) {
return {
"--rotation": `rotate(${t}deg)`
};
}
_setButtonContainerRef(t) {
t !== void 0 ? (this._buttonsContainer = t, queueMicrotask(() => {
this._buttons = Object.fromEntries(Array.from(t.children, (e) => [
Number.parseInt(e.getAttribute("data-angle") ?? ""),
e
]));
})) : (this._buttonsContainer = void 0, this._buttons = {});
}
_onButtonPointerDown(t) {
if (this._buttonsContainer === void 0)
return;
t.composedPath().find((n) => n.hasPointerCapture?.(t.pointerId))?.releasePointerCapture(t.pointerId);
const o = C(this._buttonsContainer);
this.viewModel.beginFollowingPointer(t, o);
}
_onSliderInput({ currentTarget: t }) {
typeof t.value == "number" && (this.viewModel.rotation = t.value);
}
_onRotationReset() {
this.viewModel.rotation = 0;
}
_onClick(t) {
this.viewModel.moveOnce(t);
}
render() {
const { label: t, disabled: e } = this, o = this.view == null || this.view.type === "2d";
return i`<div .ariaLabel=${t ?? void 0} class=${f({ root: !0, [r.widget]: !0, [r.disabled]: e })} tabindex=-1>${o ? this._renderContent() : this._renderUnsupportedMessage()}</div>`;
}
_renderUnsupportedMessage() {
return i`<section class="error"><p>${this.messages.unsupported}</p></section>`;
}
_renderContent() {
return [
this.hideDirectionalButtons ? void 0 : this._renderDirectionalButtons(),
this.showRotationSlider ? this._renderRotation() : void 0
];
}
_renderDirectionalButtons() {
return s("directional-buttons-container", i`<calcite-action-bar expand-disabled floating layout=grid .scale=${this.visualScale} overflow-actions-disabled><calcite-action-group class="buttons-container" dir=ltr =${{
handleEvent: this._onContextMenu,
capture: !0
}} ${h(this._setButtonContainerRef)}>${c.slice(0, 4).map(this._renderButton, this)}${this._renderCompass()}${c.slice(4).map(this._renderButton, this)}</calcite-action-group></calcite-action-bar>`);
}
_renderButton(t) {
const { label: e, iconName: o } = y[t], n = this.messages[e];
return i`<calcite-action .active=${this.angle === t} alignment=center class="button" data-angle=${t ?? a} .disabled=${this.disabled} =${this._onClick.bind(this, t)} =${this._onButtonPointerDown} .text=${n ?? ""} title=${n ?? a}><calcite-icon .icon=${o} .scale=${this.visualScale}></calcite-icon></calcite-action>`;
}
_renderCompass() {
const t = this.disabled || x(this.view) ? "compass-needle" : "arrow-up", e = this.rotation === 0, o = this.messages.resetHeading;
return i`<calcite-action alignment=center class="compass" .disabled=${this.disabled || !this._rotationEnabled || e} =${this._onRotationReset} style=${w(this._rotateIcon(this.rotation))} .text=${o ?? ""} title=${o ?? a}>${!e && i`<calcite-icon .icon=${t} .scale=${this.visualScale}></calcite-icon>` || ""}</calcite-action>`;
}
_renderRotation() {
return s("slider-container", i`<calcite-action-bar expand-disabled floating layout=horizontal .scale=${this.visualScale}><calcite-action-group class="rotation-container">${this.showRotationResetButton ? this._renderRotationResetButton() : null}${this._renderRotationSlider()}</calcite-action-group></calcite-action-bar>`);
}
_renderRotationResetButton() {
const t = this.messages.resetHeading;
return i`<calcite-action alignment=center class="rotation-reset-button" .disabled=${this.disabled || !this._rotationEnabled} =${this._onRotationReset} .text=${t ?? ""} title=${t ?? a}><calcite-icon flip-rtl icon=rotate .scale=${this.visualScale}></calcite-icon></calcite-action>`;
}
_renderRotationSlider() {
return i`<div class="rotation-slider-container"><calcite-slider .ariaLabel=${this.messages.heading} .disabled=${this.disabled || !this._rotationEnabled} label-handles max=360 min=0 required .scale=${this.visualScale} .value=${Math.round(this.rotation)} =${this._onSliderInput}></calcite-slider></div>`;
}
}
l("arcgis-directional-pad", B);
export {
B as ArcgisDirectionalPad
};