@vcmap/ui 6.3.0-rc.2 → 6.3.0-rc.4

package/src/callback/showObjectsCallback.js

@@ -0,0 +1,62 @@
+import { FeatureLayer } from '@vcmap/core';
+import VcsCallback, { callbackClassRegistry } from './vcsCallback.js';
+
+/**
+ * @typedef {import('@vcmap/ui').VcsCallbackOptions & {
+ *   layerName?: string;
+ *   objectIds: string[];
+ * }} ShowObjectsCallbackOptions
+ */
+
+/**
+ * A callback to show objects that were previously hidden.
+ */
+export default class ShowObjectsCallback extends VcsCallback {
+  static get className() {
+    return 'ShowObjectsCallback';
+  }
+
+  /** @type {string | undefined} */
+  _layerName;
+
+  /** @type {string[]} */
+  _objectIds;
+
+  /**
+   * @param {ShowObjectsCallbackOptions} options
+   * @param {import('@vcmap/ui').VcsUiApp} app
+   */
+  constructor(options, app) {
+    super(options, app);
+
+    this._layerName = options.layerName;
+    this._objectIds = options.objectIds;
+  }
+
+  callback() {
+    /** @type {import('@vcmap/ui').VcsUiApp} */
+    const app = this._app;
+    if (this._layerName) {
+      const layer = app.layers.getByKey(this._layerName);
+      if (layer instanceof FeatureLayer) {
+        layer.featureVisibility.showObjects(this._objectIds);
+      }
+    } else {
+      app.layers.globalHider.showObjects(this._objectIds);
+    }
+  }
+
+  /** @returns {ShowObjectsCallbackOptions} */
+  toJSON() {
+    return {
+      ...super.toJSON(),
+      layerName: this._layerName,
+      objectIds: [...this._objectIds],
+    };
+  }
+}
+
+callbackClassRegistry.registerClass(
+  ShowObjectsCallback.className,
+  ShowObjectsCallback,
+);

package/src/callback/startFlightCallback.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @typedef {import('@vcmap/core').FlightInstanceOptions} FlightInstanceOptions
+ */
+/**
+ * @typedef {import('@vcmap/ui').VcsCallbackOptions & {
+ *   flight: string | FlightInstanceOptions;
+ * }} StartFlightCallbackOptions
+ */
+/**
+ * A callback to start a flight.
+ */
+export default class StartFlightCallback extends VcsCallback {
+    /**
+     * @param {StartFlightCallbackOptions} options
+     * @param {import('@vcmap/ui').VcsUiApp} app
+     */
+    constructor(options: StartFlightCallbackOptions, app: import('@vcmap/ui').VcsUiApp);
+    /** @type {string | FlightInstanceOptions} */
+    _flight: string | FlightInstanceOptions;
+    /** @returns {Promise<void>} */
+    callback(): Promise<void>;
+    /** @returns {StartFlightCallbackOptions} */
+    toJSON(): StartFlightCallbackOptions;
+}
+export type FlightInstanceOptions = import('@vcmap/core').FlightInstanceOptions;
+export type StartFlightCallbackOptions = import('@vcmap/ui').VcsCallbackOptions & {
+    flight: string | FlightInstanceOptions;
+};
+import VcsCallback from './vcsCallback.js';

package/src/callback/startFlightCallback.js

@@ -0,0 +1,78 @@
+import { FlightInstance } from '@vcmap/core';
+import VcsCallback, { callbackClassRegistry } from './vcsCallback.js';
+
+/**
+ * @typedef {import('@vcmap/core').FlightInstanceOptions} FlightInstanceOptions
+ */
+
+/**
+ * @typedef {import('@vcmap/ui').VcsCallbackOptions & {
+ *   flight: string | FlightInstanceOptions;
+ * }} StartFlightCallbackOptions
+ */
+
+/**
+ * A callback to start a flight.
+ */
+export default class StartFlightCallback extends VcsCallback {
+  static get className() {
+    return 'StartFlightCallback';
+  }
+
+  /** @type {string | FlightInstanceOptions} */
+  _flight;
+
+  /**
+   * @param {StartFlightCallbackOptions} options
+   * @param {import('@vcmap/ui').VcsUiApp} app
+   */
+  constructor(options, app) {
+    super(options, app);
+
+    this._flight = options.flight;
+  }
+
+  /** @returns {Promise<void>} */
+  async callback() {
+    /** @type {import('@vcmap/ui').VcsUiApp} */
+    const app = this._app;
+    /** @type {FlightInstance | undefined} */
+    let flight;
+    if (typeof this._flight === 'string') {
+      flight = app.flights.getByKey(this._flight);
+    } else {
+      flight = new FlightInstance(this._flight);
+    }
+    if (flight) {
+      const player = await app.flights.setPlayerForFlight(flight);
+      player?.play();
+      return new Promise((resolve, reject) => {
+        if (player) {
+          const listener = player.stateChanged.addEventListener((state) => {
+            if (state === 'stopped') {
+              listener();
+              resolve();
+            }
+          });
+        } else {
+          reject(new Error('No flight player available'));
+        }
+      });
+    } else {
+      return Promise.reject(new Error('Flight not found'));
+    }
+  }
+
+  /** @returns {StartFlightCallbackOptions} */
+  toJSON() {
+    return {
+      ...super.toJSON(),
+      flight: structuredClone(this._flight),
+    };
+  }
+}
+
+callbackClassRegistry.registerClass(
+  StartFlightCallback.className,
+  StartFlightCallback,
+);

package/src/callback/stopFlightCallback.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @typedef {import('@vcmap/ui').VcsCallbackOptions & {
+ *   flightName: string;
+ * }} StopFlightCallbackOptions
+ */
+/**
+ * A callback to stop a flight.
+ */
+export default class StopFlightCallback extends VcsCallback {
+    /**
+     * @param {StopFlightCallbackOptions} options
+     * @param {import('@vcmap/ui').VcsUiApp} app
+     */
+    constructor(options: StopFlightCallbackOptions, app: import('@vcmap/ui').VcsUiApp);
+    /** @type {string} */
+    _flightName: string;
+    callback(): void;
+    /** @returns {StopFlightCallbackOptions} */
+    toJSON(): StopFlightCallbackOptions;
+}
+export type StopFlightCallbackOptions = import('@vcmap/ui').VcsCallbackOptions & {
+    flightName: string;
+};
+import VcsCallback from './vcsCallback.js';

package/src/callback/stopFlightCallback.js

@@ -0,0 +1,50 @@
+import VcsCallback, { callbackClassRegistry } from './vcsCallback.js';
+
+/**
+ * @typedef {import('@vcmap/ui').VcsCallbackOptions & {
+ *   flightName: string;
+ * }} StopFlightCallbackOptions
+ */
+
+/**
+ * A callback to stop a flight.
+ */
+export default class StopFlightCallback extends VcsCallback {
+  static get className() {
+    return 'StopFlightCallback';
+  }
+
+  /** @type {string} */
+  _flightName;
+
+  /**
+   * @param {StopFlightCallbackOptions} options
+   * @param {import('@vcmap/ui').VcsUiApp} app
+   */
+  constructor(options, app) {
+    super(options, app);
+
+    this._flightName = options.flightName;
+  }
+
+  callback() {
+    /** @type {import('@vcmap/ui').VcsUiApp} */
+    const app = this._app;
+    if (app.flights.player?.flightInstanceName === this._flightName) {
+      app.flights.player.stop();
+    }
+  }
+
+  /** @returns {StopFlightCallbackOptions} */
+  toJSON() {
+    return {
+      ...super.toJSON(),
+      flightName: this._flightName,
+    };
+  }
+}
+
+callbackClassRegistry.registerClass(
+  StopFlightCallback.className,
+  StopFlightCallback,
+);

package/src/callback/stopRotationCallback.d.ts

@@ -4,5 +4,6 @@ export default StopRotationCallback;
  * @extends {VcsCallback}
  */
 declare class StopRotationCallback extends VcsCallback {
+    callback(): void;
 }
 import VcsCallback from './vcsCallback.js';

package/src/callback/toggleNavbarButtonCallback.d.ts

@@ -28,6 +28,7 @@ declare class ToggleNavbarButtonCallback extends VcsCallback {
      * @private
      */
     private _activeState;
+    callback(): void;
     /**
      * @returns {ToggleNavbarButtonOptions}
      */

package/src/callback/toggleToolbarButtonCallback.d.ts

@@ -40,6 +40,7 @@ declare class ToggleToolbarButtonCallback extends VcsCallback {
      * @private
      */
     private _activeState;
+    callback(): void;
     /**
      * @returns {ToggleToolbarButtonOptions}
      */

package/src/callback/unHighlightObjectsCallback.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @typedef {import('@vcmap/ui').VcsCallbackOptions & {
+ *   layerName: string;
+ *   toUnHighlight: (string | number)[];
+ * }} UnHighlightObjectsCallbackOptions
+ */
+/**
+ * A callback to unhighlight previously highlighted objects of a FeatureLayer.
+ */
+export default class UnHighlightObjectsCallback extends VcsCallback {
+    /**
+     * @param {UnHighlightObjectsCallbackOptions} options
+     * @param {import('@vcmap/ui').VcsUiApp} app
+     */
+    constructor(options: UnHighlightObjectsCallbackOptions, app: import('@vcmap/ui').VcsUiApp);
+    /** @type {string} */
+    _layerName: string;
+    /** @type {(string | number)[]} */
+    _toUnHighlight: (string | number)[];
+    callback(): void;
+    /** @returns {UnHighlightObjectsCallbackOptions} */
+    toJSON(): UnHighlightObjectsCallbackOptions;
+}
+export type UnHighlightObjectsCallbackOptions = import('@vcmap/ui').VcsCallbackOptions & {
+    layerName: string;
+    toUnHighlight: (string | number)[];
+};
+import VcsCallback from './vcsCallback.js';

package/src/callback/unHighlightObjectsCallback.js

@@ -0,0 +1,59 @@
+import { FeatureLayer } from '@vcmap/core';
+import VcsCallback, { callbackClassRegistry } from './vcsCallback.js';
+
+/**
+ * @typedef {import('@vcmap/ui').VcsCallbackOptions & {
+ *   layerName: string;
+ *   toUnHighlight: (string | number)[];
+ * }} UnHighlightObjectsCallbackOptions
+ */
+
+/**
+ * A callback to unhighlight previously highlighted objects of a FeatureLayer.
+ */
+export default class UnHighlightObjectsCallback extends VcsCallback {
+  static get className() {
+    return 'UnHighlightObjectsCallback';
+  }
+
+  /** @type {string} */
+  _layerName;
+
+  /** @type {(string | number)[]} */
+  _toUnHighlight;
+
+  /**
+   * @param {UnHighlightObjectsCallbackOptions} options
+   * @param {import('@vcmap/ui').VcsUiApp} app
+   */
+  constructor(options, app) {
+    super(options, app);
+
+    this._layerName = options.layerName;
+    this._toUnHighlight = options.toUnHighlight;
+  }
+
+  callback() {
+    /** @type {import('@vcmap/ui').VcsUiApp} */
+    const app = this._app;
+    const layer = app.layers.getByKey(this._layerName);
+
+    if (layer instanceof FeatureLayer) {
+      layer.featureVisibility.unHighlight(this._toUnHighlight);
+    }
+  }
+
+  /** @returns {UnHighlightObjectsCallbackOptions} */
+  toJSON() {
+    return {
+      ...super.toJSON(),
+      layerName: this._layerName,
+      toUnHighlight: [...this._toUnHighlight],
+    };
+  }
+}
+
+callbackClassRegistry.registerClass(
+  UnHighlightObjectsCallback.className,
+  UnHighlightObjectsCallback,
+);

package/src/callback/vcsCallback.d.ts

@@ -1,9 +1,20 @@
 /**
- * creates instances of VcsCallback classes and executes its callback function
+ * Creates instances of VcsCallback classes and executes their `callback()`.
+ *
+ * Note: this function does not await promise-returning callbacks.
  * @param {import("@src/vcsUiApp.js").default} app
  * @param {Array<VcsCallbackOptions>} vcsCallbackOptions
+ * @returns {void}
  */
 export function executeCallbacks(app: import("@src/vcsUiApp.js").default, vcsCallbackOptions: Array<VcsCallbackOptions>): void;
+/**
+ * Creates instances of VcsCallback classes and executes their `callback()` sequentially.
+ * Awaits promise-returning callbacks before continuing with the next one.
+ * @param {import("@src/vcsUiApp.js").default} app
+ * @param {Array<VcsCallbackOptions>} vcsCallbackOptions
+ * @returns {Promise<void>}
+ */
+export function executeAsyncCallbacks(app: import("@src/vcsUiApp.js").default, vcsCallbackOptions: Array<VcsCallbackOptions>): Promise<void>;
 /**
  * @type {ClassRegistry<typeof VcsCallback>}
  */
@@ -36,7 +47,10 @@ declare class VcsCallback {
      * @type {import("@src/vcsUiApp.js").default}
      */
     protected _app: import("@src/vcsUiApp.js").default;
-    callback(): void;
+    /**
+     * @returns {void | Promise<void>}
+     */
+    callback(): void | Promise<void>;
     /**
      * @returns {VcsCallbackOptions}
      */

package/src/callback/vcsCallback.js

@@ -6,9 +6,12 @@ import { ClassRegistry } from '@vcmap/core';
 export const callbackClassRegistry = new ClassRegistry();
 
 /**
- * creates instances of VcsCallback classes and executes its callback function
+ * Creates instances of VcsCallback classes and executes their `callback()`.
+ *
+ * Note: this function does not await promise-returning callbacks.
  * @param {import("@src/vcsUiApp.js").default} app
  * @param {Array<VcsCallbackOptions>} vcsCallbackOptions
+ * @returns {void}
  */
 export function executeCallbacks(app, vcsCallbackOptions) {
   vcsCallbackOptions.forEach((options) =>
@@ -16,6 +19,26 @@ export function executeCallbacks(app, vcsCallbackOptions) {
   );
 }
 
+/**
+ * Creates instances of VcsCallback classes and executes their `callback()` sequentially.
+ * Awaits promise-returning callbacks before continuing with the next one.
+ * @param {import("@src/vcsUiApp.js").default} app
+ * @param {Array<VcsCallbackOptions>} vcsCallbackOptions
+ * @returns {Promise<void>}
+ */
+export async function executeAsyncCallbacks(app, vcsCallbackOptions) {
+  for (const options of vcsCallbackOptions) {
+    const callbackInstance = app.callbackClassRegistry.createFromTypeOptions(
+      options,
+      app,
+    );
+    if (callbackInstance) {
+      // eslint-disable-next-line no-await-in-loop
+      await callbackInstance.callback();
+    }
+  }
+}
+
 /**
  * @typedef {Object} VcsCallbackOptions
  * @property {string} type
@@ -45,6 +68,9 @@ class VcsCallback {
     this._app = app;
   }
 
+  /**
+   * @returns {void | Promise<void>}
+   */
   // eslint-disable-next-line class-methods-use-this
   callback() {}
 

package/src/components/extent/VcsExtentEditor.vue

@@ -3,7 +3,7 @@
     class="vcs-extent-editor"
     :heading="heading"
     :header-actions="actions"
-    :action-button-list-overflow-count="2"
+    :action-button-list-overflow-count="3"
     :disabled="disabled"
     expandable
     start-open
@@ -27,6 +27,7 @@
    * @vue-prop {import("@vcmap/core").ExtentOptions} [modelValue] - the extent options to be modeled.
    * @vue-prop {boolean} [disabled=false] - Disable coordinate input.
    * @vue-prop {string} [heading='component.extent.title] - Header of the form section
+   * @vue-prop {boolean} [showExtentOnStartup=false] - Whether to activate the extent layer on startup
    */
   export default {
     name: 'VcsExtentEditor',
@@ -48,6 +49,10 @@
         type: String,
         default: 'components.extent.title',
       },
+      showExtentOnStartup: {
+        type: Boolean,
+        default: false,
+      },
     },
     emits: ['update:modelValue'],
     setup(props, { emit }) {
@@ -63,7 +68,11 @@
         },
       });
 
-      const { actions, destroy } = setupExtentComponentActions(app, extent);
+      const { actions, destroy } = setupExtentComponentActions(
+        app,
+        extent,
+        props.showExtentOnStartup,
+      );
 
       onUnmounted(() => {
         destroy();

package/src/components/extent/VcsExtentEditor.vue.d.ts

@@ -11,6 +11,10 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    showExtentOnStartup: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     localValue: import("vue").Ref<any>;
     actions: import("../../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction[];
@@ -27,11 +31,16 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    showExtentOnStartup: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     disabled: boolean;
     modelValue: Record<string, any>;
     heading: string;
+    showExtentOnStartup: boolean;
 }, {}>;
 export default _default;

package/src/components/flight/VcsFlightComponent.vue

@@ -202,17 +202,22 @@
       const app = inject('vcsApp');
       const flightInstance = getProvidedFlightInstance();
       const loop = ref(flightInstance.loop);
+      const interpolationValue = ref(flightInstance.interpolation);
       const flightDuration = ref(getFlightDuration(flightInstance));
       const disablePlayer = ref(!(flightDuration.value > 0));
-      const flightDurationListener = [
+      const flightInstanceListeners = [
         flightInstance.anchorsChanged.addEventListener(() => {
           flightDuration.value = getFlightDuration(flightInstance);
           disablePlayer.value = !(flightDuration.value > 0);
         }),
         flightInstance.propertyChanged.addEventListener((prop) => {
           if (prop === 'loop') {
+            loop.value = flightInstance.loop;
             flightDuration.value = getFlightDuration(flightInstance);
           }
+          if (prop === 'interpolation') {
+            interpolationValue.value = flightInstance.interpolation;
+          }
         }),
       ];
       const editingListener = setupFlightAnchorEditingListener(
@@ -221,7 +226,7 @@
       );
 
       onUnmounted(() => {
-        flightDurationListener.forEach((cb) => cb());
+        flightInstanceListeners.forEach((cb) => cb());
         editingListener();
       });
 
@@ -243,9 +248,10 @@
         }),
         interpolation: computed({
           get() {
-            return flightInstance?.interpolation;
+            return interpolationValue.value;
           },
           set(value) {
+            interpolationValue.value = value;
             flightInstance.interpolation = value;
           },
         }),

package/src/contentTree/wmsGroupContentTreeItem.js

@@ -1,4 +1,4 @@
-import { markVolatile } from '@vcmap/core';
+import { getInitForUrl, markVolatile } from '@vcmap/core';
 import { getLogger } from '@vcsuite/logger';
 import { ref } from 'vue';
 import { parseBoolean } from '@vcsuite/parsers';
@@ -98,9 +98,10 @@ function parseSerializedCapabilities(capabilities) {
 /**
  * @param {string} rawUrl
  * @param {Record<string, string>} parameters
+ * @param {Record<string, string>} headers
  * @returns {Promise<Array<WMSEntry>>} The fetched capabilities.
  */
-async function getWMSEntries(rawUrl, parameters) {
+async function getWMSEntries(rawUrl, parameters, headers) {
   const url = new URL(rawUrl);
   const excludedParameters = [
     'LAYERS',
@@ -117,7 +118,8 @@ async function getWMSEntries(rawUrl, parameters) {
   url.searchParams.set('SERVICE', 'WMS');
   url.searchParams.set('REQUEST', 'GetCapabilities');
 
-  const res = await fetch(url.toString());
+  const init = getInitForUrl(url.toString(), headers);
+  const res = await fetch(url.toString(), init);
   if (!res.ok) {
     throw new Error(`Failed to fetch capabilities: ${res.statusText}`);
   }
@@ -605,6 +607,7 @@ class WMSGroupContentTreeItem extends VcsObjectContentTreeItem {
         availableWMSEntries = await getWMSEntries(
           this._layer.url,
           this._layer.parameters,
+          this._layer.headers,
         );
       }
       // check if the layer still exists, it can happen that the layer was removed while fetching the capabilities.

package/src/i18n/de.d.ts

@@ -348,6 +348,8 @@ declare namespace messages {
             export let show: string;
             export let hide: string;
             export let create: string;
+            let reset_1: string;
+            export { reset_1 as reset };
             let zoom_1: string;
             export { zoom_1 as zoom };
             export let invalid: string;

package/src/i18n/de.js

@@ -223,6 +223,7 @@ const messages = {
       show: 'Ausdehnung in Karte anzeigen',
       hide: 'Ausdehnung in Karte ausblenden',
       create: 'Neue Ausdehnung in Karte zeichnen',
+      reset: 'Ausdehnung zurücksetzen',
       zoom: 'Auf Ausdehnung zoomen',
       invalid: 'Koordinaten ergeben keine valide Ausdehnung!',
       editVertices: 'Ecken bearbeiten',

package/src/i18n/en.d.ts

@@ -348,6 +348,8 @@ declare namespace messages {
             export let show: string;
             export let hide: string;
             export let create: string;
+            let reset_1: string;
+            export { reset_1 as reset };
             let zoom_1: string;
             export { zoom_1 as zoom };
             export let invalid: string;

package/src/i18n/en.js

@@ -223,6 +223,7 @@ const messages = {
       show: 'Show extent in map',
       hide: 'Hide extent in map',
       create: 'Draw new extent in map',
+      reset: 'Reset extent',
       zoom: 'Zoom to extent',
       invalid: 'Coordinates do not result in a valid extent!',
       editVertices: 'Edit extent corners',

package/src/navigation/overviewMap.js

@@ -11,10 +11,10 @@ import {
   Extent,
   Viewpoint,
   deserializeLayer,
-  maxZIndex,
   CesiumMap,
   PanoramaMap,
   PanoramaImageSelection,
+  maxZIndexMin50,
 } from '@vcmap/core';
 import Point from 'ol/geom/Point.js';
 import Feature from 'ol/Feature.js';
@@ -536,7 +536,7 @@ class OverviewMap {
     this._obliqueTileLayer = new VectorLayer({
       projection: mercatorProjection.toJSON(),
       style: obliqueTileStyle,
-      zIndex: maxZIndex - 3,
+      zIndex: maxZIndexMin50 - 4,
     });
     this._obliqueTileLayer[overviewMapLayerSymbol] = true;
 
@@ -551,13 +551,13 @@ class OverviewMap {
     this._obliqueImageLayer = new VectorLayer({
       projection: mercatorProjection.toJSON(),
       style: obliqueImageStyle,
-      zIndex: maxZIndex - 2,
+      zIndex: maxZIndexMin50 - 3,
     });
     this._obliqueImageLayer[overviewMapLayerSymbol] = true;
     this._obliqueSelectedImageLayer = new VectorLayer({
       projection: mercatorProjection.toJSON(),
       style: this.obliqueSelectedStyle,
-      zIndex: maxZIndex - 1,
+      zIndex: maxZIndexMin50 - 2,
     });
     this._obliqueSelectedImageLayer[overviewMapLayerSymbol] = true;
     this._map.layerCollection.add(this._obliqueImageLayer);
@@ -610,7 +610,8 @@ class OverviewMap {
     if (!this._cameraIconLayer) {
       this._cameraIconLayer = new VectorLayer({
         projection: mercatorProjection.toJSON(),
-        zIndex: maxZIndex,
+        // pretty far at the top, but not above panoramas
+        zIndex: maxZIndexMin50 - 1,
       });
       this._cameraIconLayer[overviewMapLayerSymbol] = true;
       this._map.layerCollection.add(this._cameraIconLayer);