@geoscene/map-components 4.33.20 → 5.0.19

package/dist/components/geoscene-building-level-picker/customElement.js

@@ -0,0 +1,186 @@
+/* COPYRIGHT GeoScene - https://js.geoscene.cn/5.0/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 "@geoscene/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 "@geoscene/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 "@geoscene/core/core/reactiveUtils.js";
+const S = L`:host{transition:max-height .25s ease-in-out;--geoscene-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.geosceneBuildingLevelChange = $({ 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.geosceneBuildingLevelChange.emit());
+  }
+  #i() {
+    this.level && (this.level.previous(), this.geosceneBuildingLevelChange.emit());
+  }
+  #r() {
+    this.level == null || this.hoveredLevel == null || (this.level.value === this.hoveredLevel && !this.level.disabled ? this.#l() : (this.level.select(this.hoveredLevel), this.geosceneBuildingLevelChange.emit()));
+  }
+  #l() {
+    this.level && !this.level.disabled && (this.level.clear(), this.geosceneBuildingLevelChange.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`<geoscene-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}></geoscene-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("geoscene-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} @click=${t.onNext} .disabled=${!t.hasNext}></calcite-action>${t.children}<calcite-action icon=chevron-down appearance=transparent .text=${t.messages.previousLevel} @click=${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
+  })} @click=${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 @click=${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" @pointerenter=${t.onPointerEnter} @pointerover=${t.onPointerEnter} @pointermove=${t.onPointerMove} @pointerleave=${t.onPointerLeave} @pointerup=${t.onPointerUp} @click=${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("geoscene-building-level-picker", f);
+export {
+  f as BuildingLevelPicker
+};

package/dist/components/geoscene-building-level-picker/index.js

@@ -0,0 +1,4 @@
+import "../geoscene-building-level-item/index.js";
+import "@geoscene/calcite-components/components/calcite-action";
+import "@geoscene/calcite-components/components/calcite-fab";
+export * from "./customElement.js";

package/dist/components/geoscene-building-phase-picker/customElement.js

@@ -0,0 +1,90 @@
+/* COPYRIGHT GeoScene - https://js.geoscene.cn/5.0/LICENSE.txt */
+import { c as l } from "../../chunks/runtime.js";
+import { css as h, html as a } from "lit";
+import { keyed as o } from "lit/directives/keyed.js";
+import { LitElement as d, createEvent as u, safeClassMap as s, nothing as p } from "@geoscene/lumina";
+import { d as v } from "../../chunks/constants.js";
+import { clamp as m } from "@geoscene/toolkit/number";
+import { useDirection as g } from "@geoscene/lumina/controllers";
+import { when as f, watch as b } from "@geoscene/core/core/reactiveUtils.js";
+const w = h`:host{--num-phases: 7;--container-width: 100cqw;--phase-size: 24px;--arrow-width: 16px;--padding: var(--calcite-spacing-xxs);--divider-width-min: var(--calcite-spacing-base);--divider-width-max: var(--calcite-spacing-xl);--divider-width: calc( (var(--container-width) - (var(--phase-size) * var(--num-phases)) - (var(--arrow-width) * 2) - (var(--padding) * 2) ) / (var(--num-phases) - 1) );container-type:inline-size}.phase-picker,.phases-container{display:flex;flex-direction:row;align-items:center}.phases-container{position:relative;flex-shrink:1;padding:var(--calcite-spacing-xxs);overflow:hidden}.phase-button{appearance:none;display:flex;flex-shrink:0;align-items:center;justify-content:center;border:solid var(--calcite-border-width-sm) var(--calcite-color-border-2);border-radius:var(--calcite-corner-radius-pill);background:var(--calcite-color-background);cursor:pointer;padding:1px 0 0;width:var(--phase-size);height:var(--phase-size);color:var(--calcite-color-text-1);font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size);font-weight:var(--calcite-font-weight-regular)}.phase-button:hover{border-width:var(--calcite-border-width-md);border-color:var(--calcite-color-brand)}.phase-button:focus-visible{outline:var(--calcite-border-width-md) solid var(--calcite-color-brand);outline-offset:var(--calcite-border-width-md)}.phase-button.active{border-color:var(--calcite-color-brand);background-color:var(--calcite-foreground-1)}.phase-button.current{background-color:var(--calcite-color-brand);color:var(--calcite-color-text-inverse)}.arrow-left,.arrow-right{--calcite-internal-action-padding-inline: 0;width:var(--arrow-width);min-width:var(--arrow-width)}.divider{flex:0;background:var(--calcite-color-border-1);min-width:clamp(var(--divider-width-min),var(--divider-width),var(--divider-width-max));height:var(--calcite-border-width-sm)}.divider.active{background-color:var(--calcite-color-brand)}`;
+class x extends d {
+  constructor() {
+    super(...arguments), this.#i = g(), this.#e = !0, this.#t = !1, this.geosceneBuildingPhaseChange = u({ bubbles: !0, composed: !0 });
+  }
+  static {
+    this.properties = { messages: 0, phase: 0, numberOfPhases: 32, phaseHeight: 32 };
+  }
+  static {
+    this.styles = w;
+  }
+  get phases() {
+    return this.phase?.allowedValues ?? [];
+  }
+  #i;
+  #e;
+  #t;
+  #r() {
+    const e = this.renderRoot.querySelector("button.current");
+    e && (this.#e && (e.scrollIntoView({ block: "nearest", inline: "center" }), this.#e = !1), this.#t && (e.focus(), this.#t = !1));
+  }
+  #a() {
+    this.phase && (this.phase.next(), this.geosceneBuildingPhaseChange.emit());
+  }
+  #s() {
+    this.phase && (this.phase.previous(), this.geosceneBuildingPhaseChange.emit());
+  }
+  #c(e) {
+    this.phase != null && this.phase?.value !== e && (this.phase?.select(e), this.geosceneBuildingPhaseChange.emit());
+  }
+  get numberOfPhases() {
+    return this.phases.length;
+  }
+  get phaseHeight() {
+    const e = v, r = e * 2 / Math.sqrt(this.numberOfPhases);
+    return Math.round(m(r, 2, e));
+  }
+  loaded() {
+    this.listen("keydown", (e) => {
+      switch (e.key) {
+        case "ArrowDown":
+        case "ArrowLeft":
+          e.stopPropagation(), e.preventDefault(), this.#s(), this.#t = !0;
+          break;
+        case "ArrowUp":
+        case "ArrowRight":
+          e.stopPropagation(), e.preventDefault(), this.#a(), this.#t = !0;
+          break;
+      }
+    }), this.manager.onLifecycle(() => [
+      f(() => this.phase?.state === "ready", () => {
+        requestAnimationFrame(() => {
+          this.#e = !0, this.#r();
+        });
+      }, { initial: !0 }),
+      b(() => this.phase?.value, () => {
+        this.#e = !0, this.#r();
+      })
+    ]);
+  }
+  render() {
+    const e = this.phase, r = this.messages;
+    return !r || e == null ? null : a`<div class="phase-picker">${c({ className: "arrow-left", disabled: !1, icon: this.#i === "rtl" ? "chevron-right" : "chevron-left", onClick: () => this.#s(), text: r.previousPhase })}<div class="phases-container">${this.phases.map((i, n) => a`${n > 0 && a`<span class=${s({
+      divider: !0,
+      active: e.value >= i
+    })}></span>` || ""}${o(i, a`<button class=${s({
+      "phase-button": !0,
+      active: e.value >= i,
+      current: e.value === i
+    })} @click=${() => {
+      this.#c(i);
+    }}>${i}</button>`)}`)}</div>${c({ className: "arrow-right", disabled: !1, icon: this.#i === "rtl" ? "chevron-left" : "chevron-right", onClick: () => this.#a(), text: r.nextPhase })}</div>`;
+  }
+}
+function c(t) {
+  return o(t.className, a`<calcite-action appearance=transparent class=${s(t.className)} .disabled=${t.disabled} .icon=${t.icon} icon-flip-rtl @click=${t.onClick} scale=s .text=${t.text} title=${t.text ?? p}></calcite-action>`);
+}
+l("geoscene-building-phase-picker", x);
+export {
+  x as BuildingPhasePicker
+};

package/dist/components/geoscene-building-phase-picker/index.js

@@ -0,0 +1,2 @@
+import "@geoscene/calcite-components/components/calcite-action";
+export * from "./customElement.js";