@arcgis/map-components
Version:
ArcGIS Map Components
187 lines (186 loc) • 10.4 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as p } from "../../chunks/runtime.js";
import { repeat as b } from "lit/directives/repeat.js";
import { css as L, html as o } from "lit";
import { keyed as x } from "lit/directives/keyed.js";
import { LitElement as P, createEvent as $, safeClassMap as a, nothing as h, safeStyleMap as m } from "@arcgis/lumina";
import { l as w, a as H, b as y, c as M, d as C, e as k, f as z, g as W, h as E, i as v, j as d } from "../../chunks/constants.js";
import { clamp as c } from "@arcgis/toolkit/number";
import { queryAll as O } from "lit/decorators.js";
import { createRef as A, ref as B } from "lit/directives/ref.js";
import { watch as N } from "@arcgis/core/core/reactiveUtils.js";
const S = L`:host{transition:max-height .25s ease-in-out;--esri-widget-padding: 12px 15px;--level-picker-padding: var(--calcite-spacing-md);--level-label-color: var(--calcite-color-text-1);--level-label-color--empty: var(--calcite-color-text-2);--level-label-color--active: var(--calcite-color-brand);--level-border-width: 2px;--level-border-color: var(--calcite-color-border-2);--level-border-color--hover: var(--calcite-color-brand);--level-border-color--active: var(--calcite-color-brand);--level-background-color: rgb(from var(--calcite-color-foreground-1) r g b / 70%);--level-background-color--hover: rgb(from var(--calcite-color-foreground-1) r g b / 90%);--level-background-color--active: var(--calcite-color-brand);--focus-outline-width: 2px;--focus-outline-color: var(--calcite-color-brand);--focus-outline-offset: 2px}.container{height:max-content;display:flex;flex-direction:row;align-items:center;&.no-level{display:none}>*{height:max-content}}.clear-button{appearance:none;margin-inline-start:7px;display:none;position:absolute;inset-block-start:-4px}.label-container{--width: 90px;--height: 40px;flex-direction:column;justify-content:space-between;align-items:center;width:50%;margin-inline-end:var(--calcite-spacing-md);display:flex;&.active{color:var(--calcite-color-brand)}&.empty{cursor:default;color:var(--calcite-color-border-2);font-size:var(--calcite-font-size);font-weight:var(--calcite-font-weight-light)}&:focus{outline:none}&:focus-visible{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus)}}.level-label{position:relative;text-align:center;>span{pointer-events:none}&.active{font-size:var(--height);line-height:calc(var(--height) + 6px);>.clear-button{display:inline-block}}}.tiles-container{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;transform:rotate(180deg);cursor:pointer;padding:20px 0;width:50%}.tiles-inner-container{transition:margin .3s}`;
var T = Object.defineProperty, F = (t, e, i, n) => {
for (var l = void 0, r = t.length - 1, s; r >= 0; r--)
(s = t[r]) && (l = s(e, i, l) || l);
return l && T(e, i, l), l;
};
class f extends P {
constructor() {
super(...arguments), this.hovering = !1, this.onPointerMove = (e) => {
if (!this.hovering)
return !1;
if (window.getSelection()?.removeAllRanges(), this.containerPosTop != null) {
const i = this.containerPosTop, n = v * d, l = this.expandedLevelsMargin;
let r = this.levelsHeight, s = i + n + l;
const g = this.levelHeight / 2;
s += g, r -= g;
let u = (e.clientY - s) / r;
u += W, this.normalizedPointerPosition = u;
}
return !1;
}, this.onPointerEnter = () => {
const e = this.levelsContainer.value;
this.hovering || e == null || (this.hovering = !0, this.containerPosTop = e.getBoundingClientRect().top ?? 0);
}, this.levelsContainer = A(), this.onPointerLeave = () => {
if (this.hovering) {
window.getSelection()?.removeAllRanges();
for (const e of this.levelItems)
e.width = void 0;
this.normalizedPointerPosition = 0, this.hoveredLevel = null, this.hovering = !1;
}
}, this.onPointerUp = () => {
window.getSelection()?.removeAllRanges();
const e = this.level;
this.hoveredLevel == null || e == null || this.#r();
}, this.expandedLevelsHeight = void 0, this.normalizedPointerPosition = 0, this.hoveredLevel = null, this.arcgisBuildingLevelChange = $({ bubbles: !0, composed: !0 });
}
static {
this.properties = { expandedLevelsHeight: 16, normalizedPointerPosition: 16, hoveredLevel: 16, messages: 0, level: 0, numberOfLevels: 32, levelHeight: 32, levelsHeight: 32 };
}
static {
this.styles = S;
}
get levels() {
return this.level?.allowedValues ?? [];
}
get levelWidth() {
const { levelWidthNominator: e, levelWidthConstant: i } = E, n = e / Math.sqrt(this.numberOfLevels) + i;
return Math.round(c(n, w, H));
}
get _gaussianFactor() {
const e = this.numberOfLevels;
return e / Math.log(y * e) * M;
}
get expandedLevelsMargin() {
return Math.round(((this.expandedLevelsHeight ?? 0) - this.levelsHeight) / 2);
}
get levelClosestToPointer() {
if (!this.hovering)
return null;
const e = this.numberOfLevels - 1, i = this.clampedNormalizedPointerPosition;
return e >= 0 && i != null ? this.levels[Math.round((1 - i) * e)] : null;
}
get clampedNormalizedPointerPosition() {
return c(this.normalizedPointerPosition, 0, 1);
}
get numberOfLevels() {
return this.levels.length;
}
get levelHeight() {
const e = C, i = e * 2 / Math.sqrt(this.numberOfLevels);
return Math.round(c(i, 2, e));
}
get levelsHeight() {
return Math.round(this.levelHeight * this.numberOfLevels);
}
async loaded() {
this.listen("keydown", this.#n.bind(this)), this.manager.onLifecycle(() => [
N(() => [this.normalizedPointerPosition, this.hovering], () => this.onPointerPositionChange(), { initial: !0 })
]);
}
onPointerPositionChange() {
let e = 0;
this.levelItems.forEach((n, l) => {
const { width: r, height: s } = this.getLevelWidgetSize(l);
n.height = s, n.width = r, e += s;
}), this.hoveredLevel = this.levelClosestToPointer;
const i = this.expandedLevelsHeight;
(i == null || Math.abs(i - e) > 30) && (this.expandedLevelsHeight = e);
}
getLevelWidgetSize(e) {
const i = { width: this.levelWidth, height: this.levelHeight };
if (this.hovering) {
const n = this.getGaussianFactor(e, this.clampedNormalizedPointerPosition);
i.width += k * n, i.height += z * n;
}
return i;
}
getGaussianFactor(e, i) {
const n = this.numberOfLevels - 1, l = (n - e) / n, r = this._gaussianFactor * (l - i);
return Math.exp(-(r ** 2));
}
#n(e) {
switch (e.key) {
case "ArrowDown":
case "ArrowLeft":
e.preventDefault(), e.stopPropagation(), this.#i(), this.#e();
break;
case "ArrowUp":
case "ArrowRight":
e.preventDefault(), e.stopPropagation(), this.#t(), this.#e();
break;
}
}
#e() {
Array.from(this.levelItems).find((i) => i.level === this.level?.value)?.focus();
}
#t() {
this.level && (this.level.next(), this.arcgisBuildingLevelChange.emit());
}
#i() {
this.level && (this.level.previous(), this.arcgisBuildingLevelChange.emit());
}
#r() {
this.level == null || this.hoveredLevel == null || (this.level.value === this.hoveredLevel && !this.level.disabled ? this.#l() : (this.level.select(this.hoveredLevel), this.arcgisBuildingLevelChange.emit()));
}
#l() {
this.level && !this.level.disabled && (this.level.clear(), this.arcgisBuildingLevelChange.emit());
}
render() {
if (!this.messages)
return null;
const e = this.level;
e?.value;
const i = e && !e.disabled, n = this.numberOfLevels > 1 ? b(this.levels, (l) => l, (l) => o`<arcgis-building-level-item .level=${l} .baseWidth=${this.levelWidth} .hovered=${this.hoveredLevel === l} .active=${e && !e.disabled && e.value === l} class=${a({ "animate-level": !this.hovering })} .messages=${this.messages}></arcgis-building-level-item>`) : null;
return o`<div class=${a({
container: !0,
"no-level": this.numberOfLevels < 2,
"animate-level": this.hovering
})}>${D({ messages: this.messages, active: i, hasNext: e?.hasNext, hasPrevious: e?.hasPrevious, onNext: () => this.#t(), onPrevious: () => this.#i(), children: R({ messages: this.messages, level: this.hoveredLevel ?? e?.value, active: i, onClear: () => this.#l() }) })}${_({ ref: this.levelsContainer, expandedLevelsMargin: this.expandedLevelsMargin, levelsHeight: this.levelsHeight, onPointerEnter: this.onPointerEnter, onPointerMove: this.onPointerMove, onPointerLeave: this.onPointerLeave, onPointerUp: this.onPointerUp, children: n })}</div>`;
}
}
F([
O("arcgis-building-level-item")
], f.prototype, "levelItems");
function D(t) {
return o`<div class=${a({
"label-container": !0,
empty: !t.active,
active: !0,
hover: !0
})} title=${t.messages.selectLevel ?? h} tabindex=0><calcite-action icon=chevron-up appearance=transparent .text=${t.messages.nextLevel} =${t.onNext} .disabled=${!t.hasNext}></calcite-action>${t.children}<calcite-action icon=chevron-down appearance=transparent .text=${t.messages.previousLevel} =${t.onPrevious} .disabled=${!t.hasPrevious}></calcite-action></div>`;
}
function R(t) {
const e = t.messages;
return o`<div aria-label=${e.clearLevel ?? h} class=${a({
"level-label": !0,
active: t.active && t.level != null
})} =${t.onClear} title=${e.clearLevel ?? h}>${t.active ? o`<span>${t.level}</span>${x("clear-button", o`<calcite-fab appearance=outline-fill class="clear-button" icon=x kind=neutral =${t.onClear} scale=s></calcite-fab>`)}` : o`<span>${e.selectLevel}</span>`}</div>`;
}
function _(t) {
const e = v * d, i = -e / d, n = t.levelsHeight, l = n + e * 2;
return o`<div class="tiles-container" =${t.onPointerEnter} =${t.onPointerEnter} =${t.onPointerMove} =${t.onPointerLeave} =${t.onPointerUp} =${t.onClick} style=${m({
height: `${l}px`,
marginBlockStart: `${i}px`,
marginBlockEnd: `${i}px`
})} ${B(t.ref)}><div class="tiles-inner-container" style=${m({
height: `${n}px`,
margin: "0",
marginBlockStart: `${v - t.expandedLevelsMargin}px`
})}>${t.children}</div></div>`;
}
p("arcgis-building-level-picker", f);
export {
f as BuildingLevelPicker
};