@arcgis/map-components
Version:
ArcGIS Map Components
87 lines (86 loc) • 3.81 kB
JavaScript
import { c as h } from "../../chunks/runtime.js";
import { html as f } from "lit-html";
import { classes as i } from "@arcgis/components-utils";
import { ignoreAbortErrors as l } from "@arcgis/core/core/promiseUtils.js";
import { when as m } from "@arcgis/core/core/reactiveUtils.js";
import { LitElement as y, createEvent as p, noShadowRoot as g, safeClassMap as r, nothing as u } from "@arcgis/lumina";
import { usePropertyChange as z } from "@arcgis/lumina/controllers";
import { u as b } from "../../chunks/useT9n.js";
import { u as O } from "../../chunks/useView.js";
import { css as Z } from "@lit/reactive-element/css-tag.js";
/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
See https://js.arcgis.com/4.33/esri/copyright.txt for details.
v4.33.13 */
const a = {
base: "arcgis-zoom",
horizontalLayout: "arcgis-zoom--horizontal",
button: "esri-widget--button",
zoomIn: "arcgis-zoom__zoom-in",
zoomOut: "arcgis-zoom__zoom-out"
};
function I(t) {
if (t.type === "3d")
return !!t.ready;
if (!t?.ready)
return !1;
const e = d(t), s = t.constraints?.effectiveMaxScale;
return s === 0 || e > s;
}
function w(t) {
if (t.type === "3d")
return !!t.ready;
if (!t?.ready)
return !1;
const e = d(t), s = t.constraints?.effectiveMinScale;
return s === 0 || e < s;
}
function d(t) {
const o = t?.animation?.target;
return (o && "then" in o ? void 0 : o?.scale) ?? t?.scale ?? 0;
}
const x = Z`{arcgis-zoom,.arcgis-zoom{display:flex;flex-flow:column nowrap;box-shadow:0 1px 2px #0000004d}.arcgis-zoom__zoom-out{border-block-start:solid 1px var(--calcite-color-border-1)}.arcgis-zoom--horizontal{flex-flow:row-reverse nowrap}.arcgis-zoom--horizontal .arcgis-zoom__zoom-out{border-block-start:none;border-inline-end:solid 1px var(--calcite-color-border-1)}}`;
class $ extends y {
constructor() {
super(...arguments), this.messages = b({}), this.view = O(this), this.canZoomIn = !1, this.canZoomOut = !1, this.autoDestroyDisabled = !1, this.icon = "magnifying-glass-plus", this.layout = "vertical", this.position = "top-left", this.state = "disabled", this.arcgisPropertyChange = z()("state"), this.arcgisReady = p();
}
static {
this.properties = { canZoomIn: 16, canZoomOut: 16, autoDestroyDisabled: 5, icon: 1, label: 1, layout: 3, messageOverrides: 0, position: 1, referenceElement: 1, state: 3 };
}
static {
this.shadowRootOptions = g;
}
static {
this.styles = x;
}
async destroy() {
await this.manager.destroy();
}
async zoomIn() {
const { view: o } = this;
!this.canZoomIn || !o || (o.type === "2d" ? o.mapViewNavigation.zoomIn() : l(o.goTo({ zoomFactor: 2 })));
}
async zoomOut() {
const { view: o } = this;
!this.canZoomOut || !o || (o.type === "2d" ? o.mapViewNavigation.zoomOut() : l(o.goTo({ zoomFactor: 0.5 })));
}
loaded() {
this.manager.onLifecycle(() => [
m(() => this.view?.stationary, () => {
this.canZoomIn = I(this.view), this.canZoomOut = w(this.view);
}, { initial: !0 }),
m(() => this.view?.ready ? "ready" : "disabled", (o) => {
this.state = o;
}, { sync: !0, initial: !0 })
]);
}
render() {
const o = {
[a.horizontalLayout]: this.layout === "horizontal"
}, { canZoomIn: e, canZoomOut: s } = this, { zoomIn: n, zoomOut: c } = this.messages;
return f`<div class=${r(i(a.base, o))}><calcite-button class=${r(i(a.button, a.zoomIn))} .disabled=${!e} icon-start=plus kind=neutral .label=${n} =${this.zoomIn} title=${n ?? u}></calcite-button><calcite-button class=${r(i(a.button, a.zoomOut))} .disabled=${!s} icon-start=minus kind=neutral .label=${c} =${this.zoomOut} title=${c ?? u}></calcite-button></div>`;
}
}
h("arcgis-zoom", $);
export {
$ as ArcgisZoom
};