@geoscene/map-components 4.33.20 → 5.0.19

package/dist/components/geoscene-zoom/customElement.d.ts

@@ -1,84 +1,103 @@
-/// <reference types="@geoscene/core/interfaces.d.ts" />
-/// <reference types="../../index.d.ts" />
-import { default as MapView } from '@geoscene/core/views/MapView.js';
-import { default as SceneView } from '@geoscene/core/views/SceneView.js';
-import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@geoscene/lumina';
-import { GeosceneReferenceElement } from '../../utils/component-utils';
+/// <reference path="../../index.d.ts" />
+import type MapView from "@geoscene/core/views/MapView.js";
+import type SceneView from "@geoscene/core/views/SceneView.js";
+import type { PublicLitElement as LitElement } from "@geoscene/lumina";
+import type { GeosceneReferenceElement } from "../types.js";
+import type { Layout, State } from "./types.js";
+import type { T9nMeta } from "@geoscene/lumina/controllers";
+import type { Button as Button } from "@geoscene/calcite-components/components/calcite-button";
 
-type Layout = "horizontal" | "vertical";
-type State = "disabled" | "ready";
 /**
  * The Zoom component allows users to zoom in/out within a map or scene.
  *
- * [Read more...](https://doc.geoscene.cn/javascript/4.33/references/map-components/geoscene-zoom/)
+ * @since 4.28
  */
-export declare class GeosceneZoom extends LitElement {
-    /**
-     * If true, the component will not be destroyed automatically when it is
-     * disconnected from the document. This is useful when you want to move the
-     * component to a different place on the page, or temporarily hide it. If this
-     * is set, make sure to call the [destroy](https://doc.geoscene.cn/javascript/4.33/references/map-components/geoscene-zoom/#destroy) method when you are done to
-     * prevent memory leaks.
-     *
-     * @default false
-     */
-    autoDestroyDisabled: boolean;
-    /**
-     * Icon which represents the component.
-     * Typically used when the component is controlled by another component (e.g. by the Expand component).
-     *
-     * @see [Calcite Icons](https://doc.geoscene.cn/calcite-design-system/icons/)
-     * @default "magnifying-glass-plus"
-     */
-    icon?: string;
-    /** The component's default label. */
-    label?: string;
-    /**
-     * Determines the layout/orientation of the Zoom widget.
-     *
-     * @default "vertical"
-     */
-    layout: Layout;
-    /**
-     * Replace localized message strings with your own strings.
-     *
-     * _**Note**: Individual message keys may change between releases._
-     */
-    messageOverrides?: typeof this.messages._overrides;
-    /** @default "top-left" */
-    position: __geoscene.UIPosition;
-    /**
-     * By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.
-     *
-     * @see [Associate components with a Map or Scene component](https://doc.geoscene.cn/javascript/4.33/programming-patterns/#associate-components-with-a-map-or-scene-component)
-     */
-    referenceElement?: GeosceneReferenceElement | string;
-    /**
-     * The current state of the component.
-     *
-     * @default "disabled"
-     */
-    state: State;
-    /** Permanently destroy the component. */
-    destroy(): Promise<void>;
-    /** Zooms the view in by an LOD factor of 0.5. */
-    zoomIn(): Promise<void>;
-    /** Zooms the view out by an LOD factor of 2. */
-    zoomOut(): Promise<void>;
-    /** Emitted when the value of a property is changed. Use this to listen to changes to properties. */
-    readonly geoscenePropertyChange: TargetedEvent<this, {
-        name: "state";
-    }>;
-    /** Emitted when the component associated with a map or scene view is is ready to be interacted with. */
-    readonly geosceneReady: TargetedEvent<this, void>;
-    private messages: Partial<{
-        componentLabel: string;
-        zoomIn: string;
-        zoomOut: string;
-    }> & import('@geoscene/lumina/controllers').T9nMeta<{
-        componentLabel: string;
-        zoomIn: string;
-        zoomOut: string;
-    }>;
-}
-export {};
+export abstract class GeosceneZoom extends LitElement {
+  /**
+   * If true, the component will not be destroyed automatically when it is
+   * disconnected from the document. This is useful when you want to move the
+   * component to a different place on the page, or temporarily hide it. If this
+   * is set, make sure to call the [destroy()](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-zoom/#destroy) method when you are done to
+   * prevent memory leaks.
+   *
+   * @default false
+   */
+  accessor autoDestroyDisabled: boolean;
+  /**
+   * Icon which represents the component.
+   * Typically used when the component is controlled by another component (e.g. by the Expand component).
+   *
+   * @default "magnifying-glass-plus"
+   * @see [Calcite Icons](https://doc.geoscene.cn/calcite-design-system/icons/)
+   */
+  accessor icon: string | undefined;
+  /** The component's default label. */
+  accessor label: string | undefined;
+  /**
+   * Determines the layout/orientation of the Zoom component.
+   *
+   * @default "vertical"
+   */
+  accessor layout: Layout;
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
+  accessor messageOverrides: {
+      componentLabel?: string | undefined;
+      zoomIn?: string | undefined;
+      zoomOut?: string | undefined;
+  };
+  /** @internal */
+  protected messages: Partial<{
+      componentLabel: string;
+      zoomIn: string;
+      zoomOut: string;
+  }> & T9nMeta<{
+      componentLabel: string;
+      zoomIn: string;
+      zoomOut: string;
+  }>;
+  /**
+   * By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.
+   *
+   * @see [Associate components with a Map or Scene component](https://doc.geoscene.cn/javascript/5.0/programming-patterns/#associate-components-with-a-map-or-scene-component)
+   */
+  accessor referenceElement: GeosceneReferenceElement | string | undefined;
+  /** The current state of the component. */
+  get state(): State;
+  /**
+   * The view associated with the component. 
+   *   > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the geoscene-zoom component will be associated with a map or scene component rather than using the `view` property.
+   */
+  accessor view: MapView | SceneView | undefined;
+  /**
+   * Specifies the size of the component.
+   *
+   * @default "m"
+   * @since 5.0
+   */
+  accessor visualScale: Button["scale"];
+  /** Permanently destroy the component. */
+  destroy(): Promise<void>;
+  /** Zooms the view in by an LOD factor of 0.5. */
+  zoomIn(): Promise<void>;
+  /** Zooms the view out by an LOD factor of 2. */
+  zoomOut(): Promise<void>;
+  /**
+   * Emitted when one of the zoom controls is activated.
+   *
+   * @since 5.0
+   */
+  readonly geosceneActionZoom: import("@geoscene/lumina").TargetedEvent<this, { action: "zoomIn" | "zoomOut"; }>;
+  /** Emitted when the value of a property is changed. Use this to listen to changes to properties. */
+  readonly geoscenePropertyChange: import("@geoscene/lumina").TargetedEvent<this, { name: "state"; }>;
+  /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
+  readonly geosceneReady: import("@geoscene/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    geosceneActionZoom: GeosceneZoom["geosceneActionZoom"]["detail"];
+    geoscenePropertyChange: GeosceneZoom["geoscenePropertyChange"]["detail"];
+    geosceneReady: GeosceneZoom["geosceneReady"]["detail"];
+  };
+}

package/dist/components/geoscene-zoom/customElement.js

@@ -1,86 +1,85 @@
-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 "@geoscene/core/core/promiseUtils.js";
-import { when as m } from "@geoscene/core/core/reactiveUtils.js";
-import { LitElement as y, createEvent as p, noShadowRoot as g, safeClassMap as r, nothing as u } from "@geoscene/lumina";
-import { usePropertyChange as z } from "@geoscene/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 GeoScene, All Rights Reserved, unless otherwise specified.
-See https://js.geoscene.cn/4.33/geoscene/copyright.txt for details.
-v4.33.18 */
-const a = {
-  base: "geoscene-zoom",
-  horizontalLayout: "geoscene-zoom--horizontal",
-  button: "geoscene-widget--button",
-  zoomIn: "geoscene-zoom__zoom-in",
-  zoomOut: "geoscene-zoom__zoom-out"
-};
-function I(t) {
+/* COPYRIGHT GeoScene - https://js.geoscene.cn/5.0/LICENSE.txt */
+import { c as u } from "../../chunks/runtime.js";
+import { css as d, html as h } from "lit";
+import { ignoreAbortErrors as f } from "@geoscene/core/core/promiseUtils.js";
+import { when as g } from "@geoscene/core/core/reactiveUtils.js";
+import { LitElement as y, createEvent as r, safeClassMap as b, nothing as c } from "@geoscene/lumina";
+import { usePropertyChange as p } from "@geoscene/lumina/controllers";
+import { u as z } from "../../chunks/useT9n.js";
+import { u as v } from "../../chunks/useView.js";
+import { g as x } from "../../chunks/globalCss.js";
+function n(t) {
+  if (!t)
+    return !1;
   if (t.type === "3d")
-    return !!t.ready;
+    return t.ready;
   if (!t?.ready)
     return !1;
-  const e = d(t), s = t.constraints?.effectiveMaxScale;
-  return s === 0 || e > s;
+  const o = m(t), a = t.constraints?.effectiveMaxScale;
+  return a === 0 || o > a;
 }
-function w(t) {
+function l(t) {
+  if (!t)
+    return !1;
   if (t.type === "3d")
-    return !!t.ready;
+    return t.ready;
   if (!t?.ready)
     return !1;
-  const e = d(t), s = t.constraints?.effectiveMinScale;
-  return s === 0 || e < s;
+  const o = m(t), a = t.constraints?.effectiveMinScale;
+  return a === 0 || o < a;
 }
-function d(t) {
-  const o = t?.animation?.target;
-  return (o && "then" in o ? void 0 : o?.scale) ?? t?.scale ?? 0;
+function m(t) {
+  const e = t?.animation?.target;
+  return (e && "then" in e ? void 0 : e?.scale) ?? t?.scale ?? 0;
 }
-const x = Z`@layer{geoscene-zoom,.geoscene-zoom{display:flex;flex-flow:column nowrap;box-shadow:0 1px 2px #0000004d}.geoscene-zoom__zoom-out{border-block-start:solid 1px var(--calcite-color-border-1)}.geoscene-zoom--horizontal{flex-flow:row-reverse nowrap}.geoscene-zoom--horizontal .geoscene-zoom__zoom-out{border-block-start:none;border-inline-end:solid 1px var(--calcite-color-border-1)}}`;
+const w = d`.geoscene-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);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{display:flex;max-width:fit-content}.zoom-out{border-block-start:solid 1px var(--calcite-color-border-1)}.horizontal{flex-flow:row-reverse nowrap}.horizontal .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.geoscenePropertyChange = z()("state"), this.geosceneReady = p();
+    super(...arguments), this.messages = z({}), this._state = "disabled", this.view = v(this), this.autoDestroyDisabled = !1, this.icon = "magnifying-glass-plus", this.layout = "vertical", this.visualScale = "m", this.geosceneActionZoom = r(), this.geoscenePropertyChange = p()("state"), this.geosceneReady = r();
   }
   static {
-    this.properties = { canZoomIn: 16, canZoomOut: 16, autoDestroyDisabled: 5, icon: 1, label: 1, layout: 3, messageOverrides: 0, position: 1, referenceElement: 1, state: 3 };
+    this.properties = { _state: 16, view: 0, autoDestroyDisabled: 5, icon: 1, label: 1, layout: 3, messageOverrides: 0, referenceElement: 1, visualScale: 1, state: 32 };
   }
   static {
-    this.shadowRootOptions = g;
+    this.styles = w;
   }
-  static {
-    this.styles = x;
+  get state() {
+    return this._state;
   }
   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 })));
+    await this.zoomBy(1);
   }
   async zoomOut() {
-    const { view: o } = this;
-    !this.canZoomOut || !o || (o.type === "2d" ? o.mapViewNavigation.zoomOut() : l(o.goTo({ zoomFactor: 0.5 })));
+    await this.zoomBy(-1);
   }
   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;
+      g(() => this.view?.ready ? "ready" : "disabled", (e) => {
+        this._state = e;
       }, { sync: !0, initial: !0 })
     ]);
   }
+  async zoomBy(e) {
+    const { view: o } = this, a = e === 1;
+    if (!(!(a ? n(o) : l(o)) || !o))
+      if (this.geosceneActionZoom.emit({ action: a ? "zoomIn" : "zoomOut" }), o.type === "2d") {
+        const s = o.mapViewNavigation;
+        a ? await s.zoomIn() : await s.zoomOut();
+      } else
+        await f(o.goTo({ zoom: o.zoom + e }));
+  }
   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} @click=${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} @click=${this.zoomOut} title=${c ?? u}></calcite-button></div>`;
+    const e = n(this.view), o = l(this.view), { zoomIn: a, zoomOut: i } = this.messages;
+    return h`<div class=${b({
+      [x.geosceneButton]: !0,
+      horizontal: this.layout === "horizontal"
+    })}><calcite-button class="zoom-in" .disabled=${!e} icon-start=plus kind=neutral .label=${a} @click=${this.zoomIn} .scale=${this.visualScale} title=${a ?? c}></calcite-button><calcite-button class="zoom-out" .disabled=${!o} icon-start=minus kind=neutral .label=${i} @click=${this.zoomOut} .scale=${this.visualScale} title=${i ?? c}></calcite-button></div>`;
   }
 }
-h("geoscene-zoom", $);
+u("geoscene-zoom", $);
 export {
   $ as GeosceneZoom
 };

package/dist/components/geoscene-zoom/index.d.ts

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

package/dist/components/geoscene-zoom/types.d.ts

@@ -0,0 +1,3 @@
+export type Layout = "horizontal" | "vertical";
+
+export type State = "disabled" | "ready";

package/dist/components/types.d.ts

@@ -1,5 +1,58 @@
-export type MeasurementSystem = "imperial" | "metric";
-type MetricMapUnit = "centimeter" | "kilometer" | "meter" | "millimeter";
-type ImperialMapUnit = "foot" | "inch" | "mile";
-export type MapUnit = ImperialMapUnit | MetricMapUnit;
-export {};
+import type Basemap from "@geoscene/core/Basemap.js";
+import type Ground from "@geoscene/core/Ground.js";
+import type Layer from "@geoscene/core/layers/Layer.js";
+import type WebMap from "@geoscene/core/WebMap.js";
+import type WebScene from "@geoscene/core/WebScene.js";
+import type WebLinkChart from "@geoscene/core/WebLinkChart.js";
+import type SceneView from "@geoscene/core/views/SceneView.js";
+import type MapView from "@geoscene/core/views/MapView.js";
+import type LinkChartView from "@geoscene/core/views/LinkChartView.js";
+import type { GeosceneLinkChart } from "./geoscene-link-chart/customElement.js";
+import type { GeosceneMap } from "./geoscene-map/customElement.js";
+import type { GeosceneScene } from "./geoscene-scene/customElement.js";
+import type { GoToOptions2D, GoToOptions3D, GoToTarget2D, GoToTarget3D } from "@geoscene/core/views/types.js";
+import type { Icon as Icon } from "@geoscene/calcite-components/components/calcite-icon";
+
+export type GeosceneReferenceElement = GeosceneLinkChart | GeosceneMap | GeosceneScene;
+
+export type IconName = Icon["icon"];
+
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+
+/** A potential source of load errors. */
+export type LoadErrorSource = Basemap | Ground | Layer | WebLinkChart | WebMap | WebScene;
+
+/**
+ * @param view
+ * @param goToParameters
+ */
+export type GoToOverride = (view: GeoSceneView & GoToOwner, goToParameters: GoToParameters) => Promise<void>;
+
+export type GoToOwner = Pick<LinkChartView, "goTo">
+  & Pick<MapView, "goTo">
+  & Pick<SceneView, "goTo">;
+
+export type GeoSceneView = LinkChartView | MapView | SceneView;
+
+export type GoToParameters = GoToParameters2D
+  & GoToParameters3D;
+
+export interface GoToParameters2D {
+  /**
+   * The target location/viewpoint/extent to animate to.
+   *
+   * @since 5.0
+   */
+  target: GoToTarget2D;
+  /**
+   * Options defining the animation and duration of the navigation.
+   *
+   * @since 5.0
+   */
+  options?: GoToOptions2D;
+}
+
+export interface GoToParameters3D {
+  target: GoToTarget3D;
+  options?: GoToOptions3D;
+}