@vcmap/ui 6.3.0-rc.3 → 6.3.0-rc.5

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/projection/VcsProjection.vue

@@ -19,7 +19,7 @@
       return {};
     }
 
-    const match = epsg.match(epsgRegex);
+    const match = String(epsg).match(epsgRegex);
     if (!match) {
       return {};
     }

package/src/manager/navbarManager.d.ts

@@ -8,13 +8,13 @@
 export function sortByOwner(ownerA: string | symbol, ownerB: string | symbol, order?: string[] | undefined): number;
 /**
  * filters actions by button location and returns actions (optionally sorted)
- * @param {Array<import("./buttonManager.js").ButtonComponent>} buttonComponents
+ * @param {Array<NavbarButtonComponent>} buttonComponents
  * @param {ButtonLocation} location Button render position
  * @param {string[]} [order] optional order to sort by (plugin names)
- * @param {function(import("./buttonManager.js").ButtonComponent, import("./buttonManager.js").ButtonComponent):number} [compareFn=sortByOwner] Per default components are sorted by weight (highest first) and owner (app first, then plugins)
+ * @param {function(NavbarButtonComponent, NavbarButtonComponent):number} [compareFn=sortByOwner] Per default components are sorted by weight (highest first) and owner (app first, then plugins)
  * @returns {Array<import("../actions/actionHelper.js").VcsAction>}
  */
-export function getActionsByLocation(buttonComponents: Array<import("./buttonManager.js").ButtonComponent>, location: ButtonLocation, order?: string[] | undefined, compareFn?: ((arg0: import("./buttonManager.js").ButtonComponent, arg1: import("./buttonManager.js").ButtonComponent) => number) | undefined): Array<import("../actions/actionHelper.js").VcsAction>;
+export function getActionsByLocation(buttonComponents: Array<NavbarButtonComponent>, location: ButtonLocation, order?: string[] | undefined, compareFn?: ((arg0: NavbarButtonComponent, arg1: NavbarButtonComponent) => number) | undefined): Array<import("../actions/actionHelper.js").VcsAction>;
 export const locationSymbol: unique symbol;
 export const deviceSymbol: unique symbol;
 /**
@@ -30,20 +30,27 @@ export namespace ButtonLocation {
     let MENU: number;
 }
 export default NavbarManager;
-export type INavbarManager = import("../vcsUiApp.js").VcsComponentManager<import("./buttonManager.js").ButtonComponent, import("./buttonManager.js").ButtonComponentOptions>;
-export type DeviceOptions = {
-    desktop: boolean | null;
-    tablet: boolean | null;
-    mobile: boolean | null;
+export type INavbarManager = import("../vcsUiApp.js").VcsComponentManager<NavbarButtonComponent, import("./buttonManager.js").ButtonComponentOptions>;
+export type Device = 'desktop' | 'tablet' | 'mobile';
+export type DeviceOptions = Partial<Record<Device, boolean>>;
+export type NavbarButtonComponent = import("./buttonManager.js").ButtonComponent & {
+    [locationSymbol]: ButtonLocation;
+    [deviceSymbol]: DeviceOptions;
 };
 /**
- * @typedef {import("../vcsUiApp.js").VcsComponentManager<import("./buttonManager.js").ButtonComponent,import("./buttonManager.js").ButtonComponentOptions>} INavbarManager
+ * @typedef {import("../vcsUiApp.js").VcsComponentManager<NavbarButtonComponent,import("./buttonManager.js").ButtonComponentOptions>} INavbarManager
  */
 /**
- * @typedef {Object} DeviceOptions
- * @property {boolean?} desktop
- * @property {boolean?} tablet
- * @property {boolean?} mobile
+ * @typedef {'desktop' | 'tablet' | 'mobile'} Device
+ */
+/**
+ * @typedef {Partial<Record<Device, boolean>>} DeviceOptions
+ */
+/**
+ * @typedef {import("./buttonManager.js").ButtonComponent & {
+ *   [locationSymbol]: ButtonLocation,
+ *   [deviceSymbol]: DeviceOptions,
+ * }} NavbarButtonComponent
  */
 /**
  * @class NavbarManager
@@ -58,10 +65,15 @@ declare class NavbarManager extends ButtonManager implements INavbarManager {
      * @param {ButtonLocation} location Button render position
      * @param {DeviceOptions} [device={destop: true, tablet: true}] Device - optional device configuration
      * @throws {Error} if a buttonComponent with the same ID has already been added
-     * @returns {import("./buttonManager.js").ButtonComponent}
+     * @returns {NavbarButtonComponent}
      */
     // @ts-ignore
-add(buttonComponentOptions: import("./buttonManager.js").ButtonComponentOptions, owner: string | symbol, location: ButtonLocation, device?: DeviceOptions | undefined): import("./buttonManager.js").ButtonComponent;
+add(buttonComponentOptions: import("./buttonManager.js").ButtonComponentOptions, owner: string | symbol, location: ButtonLocation, device?: Partial<Record<Device, boolean>> | undefined): NavbarButtonComponent;
+    /**
+     * @param {string} id
+     * @returns {NavbarButtonComponent}
+     */
+    get(id: string): NavbarButtonComponent;
     /**
      * Toggles a button of provided id by executing its callback.
      * Use active flag to force a state to be applied.

package/src/manager/navbarManager.js

@@ -33,10 +33,10 @@ export function sortByOwner(ownerA, ownerB, order = []) {
 
 /**
  * filters actions by button location and returns actions (optionally sorted)
- * @param {Array<import("./buttonManager.js").ButtonComponent>} buttonComponents
+ * @param {Array<NavbarButtonComponent>} buttonComponents
  * @param {ButtonLocation} location Button render position
  * @param {string[]} [order] optional order to sort by (plugin names)
- * @param {function(import("./buttonManager.js").ButtonComponent, import("./buttonManager.js").ButtonComponent):number} [compareFn=sortByOwner] Per default components are sorted by weight (highest first) and owner (app first, then plugins)
+ * @param {function(NavbarButtonComponent, NavbarButtonComponent):number} [compareFn=sortByOwner] Per default components are sorted by weight (highest first) and owner (app first, then plugins)
  * @returns {Array<import("../actions/actionHelper.js").VcsAction>}
  */
 export function getActionsByLocation(
@@ -72,14 +72,22 @@ export const ButtonLocation = {
 };
 
 /**
- * @typedef {import("../vcsUiApp.js").VcsComponentManager<import("./buttonManager.js").ButtonComponent,import("./buttonManager.js").ButtonComponentOptions>} INavbarManager
+ * @typedef {import("../vcsUiApp.js").VcsComponentManager<NavbarButtonComponent,import("./buttonManager.js").ButtonComponentOptions>} INavbarManager
  */
 
 /**
- * @typedef {Object} DeviceOptions
- * @property {boolean?} desktop
- * @property {boolean?} tablet
- * @property {boolean?} mobile
+ * @typedef {'desktop' | 'tablet' | 'mobile'} Device
+ */
+
+/**
+ * @typedef {Partial<Record<Device, boolean>>} DeviceOptions
+ */
+
+/**
+ * @typedef {import("./buttonManager.js").ButtonComponent & {
+ *   [locationSymbol]: ButtonLocation,
+ *   [deviceSymbol]: DeviceOptions,
+ * }} NavbarButtonComponent
  */
 
 /**
@@ -95,7 +103,7 @@ class NavbarManager extends ButtonManager {
    * @param {ButtonLocation} location Button render position
    * @param {DeviceOptions} [device={destop: true, tablet: true}] Device - optional device configuration
    * @throws {Error} if a buttonComponent with the same ID has already been added
-   * @returns {import("./buttonManager.js").ButtonComponent}
+   * @returns {NavbarButtonComponent}
    */
   add(
     buttonComponentOptions,
@@ -115,6 +123,14 @@ class NavbarManager extends ButtonManager {
     return buttonComponent;
   }
 
+  /**
+   * @param {string} id
+   * @returns {NavbarButtonComponent}
+   */
+  get(id) {
+    return this._buttonComponents.get(id);
+  }
+
   /**
    * Toggles a button of provided id by executing its callback.
    * Use active flag to force a state to be applied.

package/src/manager/toolbox/toolboxManager.d.ts

@@ -164,7 +164,7 @@ declare class ToolboxManager implements IToolboxManager {
      * @returns {SingleToolboxComponent|SelectToolboxComponent|import("vue").ShallowReactive<GroupToolboxComponent>}
      */
     // @ts-ignore
-add(toolboxComponentOptions: SingleToolboxComponentOptions | SelectToolboxComponentOptions | GroupToolboxComponentOptions, owner: string | symbol, device?: import("../navbarManager.js").DeviceOptions | undefined): SingleToolboxComponent | SelectToolboxComponent | import("vue").ShallowReactive<GroupToolboxComponent>;
+add(toolboxComponentOptions: SingleToolboxComponentOptions | SelectToolboxComponentOptions | GroupToolboxComponentOptions, owner: string | symbol, device?: Partial<Record<import("../navbarManager.js").Device, boolean>> | undefined): SingleToolboxComponent | SelectToolboxComponent | import("vue").ShallowReactive<GroupToolboxComponent>;
     /**
      * removes all {@link ToolboxComponent}s of a specific owner and fires removed Events
      * @param {string|vcsAppSymbol} owner