@vcmap/ui 5.0.0-rc.22 → 5.0.0-rc.24

package/src/featureInfo/balloonHelper.js

@@ -1,5 +1,15 @@
-import { Cartesian2, Cartographic, SceneTransforms } from '@vcmap-cesium/engine';
-import { CesiumMap, ObliqueMap, OpenlayersMap, Projection, transformToImage } from '@vcmap/core';
+import {
+  Cartesian2,
+  Cartographic,
+  SceneTransforms,
+} from '@vcmap-cesium/engine';
+import {
+  CesiumMap,
+  ObliqueMap,
+  OpenlayersMap,
+  Projection,
+  transformToImage,
+} from '@vcmap/core';
 import { unByKey } from 'ol/Observable.js';
 import {
   getWindowPositionOptionsFromMapEvent,
@@ -44,15 +54,14 @@ export async function getBalloonPosition(app, position) {
   const map = app.maps.activeMap;
   if (map instanceof CesiumMap) {
     const wgs84Position = Projection.mercatorToWgs84(position);
-    const cartesian = Cartographic.toCartesian(Cartographic.fromDegrees(...wgs84Position));
+    const cartesian = Cartographic.toCartesian(
+      Cartographic.fromDegrees(...wgs84Position),
+    );
     return getBalloonPositionCesium(map.getScene(), cartesian);
   } else if (map instanceof OpenlayersMap) {
     return getBalloonPositionOL(map.olMap, position);
   } else if (map instanceof ObliqueMap) {
-    const { coords } = await transformToImage(
-      map.currentImage,
-      position,
-    );
+    const { coords } = await transformToImage(map.currentImage, position);
     return getBalloonPositionOL(map.olMap, coords);
   }
   return undefined;
@@ -72,7 +81,10 @@ export function setBalloonPosition(windowManager, id, windowPosition, target) {
   windowManager.setWindowPositionOptions(
     id,
     getWindowPositionOptionsFromMapEvent(
-      new Cartesian2(windowPosition.x - balloonOffset.x, windowPosition.y - balloonOffset.y),
+      new Cartesian2(
+        windowPosition.x - balloonOffset.x,
+        windowPosition.y - balloonOffset.y,
+      ),
       target,
       WindowAlignment.BOTTOM_LEFT,
     ),
@@ -85,19 +97,25 @@ export function setBalloonPosition(windowManager, id, windowPosition, target) {
  * @param {import("ol/coordinate").Coordinate} clickedPosition - position in mercator
  * @returns {Promise<(() => void)>}
  */
-export async function setupBalloonPositionListener(vcsApp, windowId, clickedPosition) {
+export async function setupBalloonPositionListener(
+  vcsApp,
+  windowId,
+  clickedPosition,
+) {
   const listeners = [];
 
   const destroy = () => {
-    listeners.forEach(cb => cb());
+    listeners.forEach((cb) => cb());
   };
 
   const setup = async (app, id, position) => {
     destroy();
 
-    listeners.push(app.maps.mapActivated.addEventListener(
-      setup.bind(null, app, id, position),
-    ));
+    listeners.push(
+      app.maps.mapActivated.addEventListener(
+        setup.bind(null, app, id, position),
+      ),
+    );
 
     const map = app.maps.activeMap;
     if (map instanceof CesiumMap) {
@@ -106,43 +124,44 @@ export async function setupBalloonPositionListener(vcsApp, windowId, clickedPosi
         position[2] = position3D[2];
       }
       const wgs84Position = Projection.mercatorToWgs84(position);
-      const cartesian = Cartographic.toCartesian(Cartographic.fromDegrees(...wgs84Position));
-      listeners.push(map.getScene().postRender.addEventListener((scene) => {
+      const cartesian = Cartographic.toCartesian(
+        Cartographic.fromDegrees(...wgs84Position),
+      );
+      listeners.push(
+        map.getScene().postRender.addEventListener((scene) => {
+          setBalloonPosition(
+            app.windowManager,
+            windowId,
+            getBalloonPositionCesium(scene, cartesian),
+            app.maps.target,
+          );
+        }),
+      );
+    } else if (map instanceof OpenlayersMap) {
+      const handler = () =>
         setBalloonPosition(
           app.windowManager,
           windowId,
-          getBalloonPositionCesium(scene, cartesian),
+          getBalloonPositionOL(map.olMap, position),
           app.maps.target,
         );
-      }));
-    } else if (map instanceof OpenlayersMap) {
-      const handler = () => setBalloonPosition(
-        app.windowManager,
-        windowId,
-        getBalloonPositionOL(map.olMap, position),
-        app.maps.target,
-      );
-      const key = map.olMap.on(
-        'postrender',
-        handler,
-      );
+      const key = map.olMap.on('postrender', handler);
       listeners.push(() => unByKey(key));
     } else if (map instanceof ObliqueMap) {
-      const { coords } = await transformToImage(
-        map.currentImage,
-        position,
-      );
-      listeners.push(map.imageChanged.addEventListener(setup.bind(null, app, windowId, position)));
-      const handler = () => setBalloonPosition(
-        app.windowManager,
-        windowId,
-        getBalloonPositionOL(map.olMap, coords),
-        app.maps.target,
-      );
-      const key = map.olMap.on(
-        'postrender',
-        handler,
+      const { coords } = await transformToImage(map.currentImage, position);
+      listeners.push(
+        map.imageChanged.addEventListener(
+          setup.bind(null, app, windowId, position),
+        ),
       );
+      const handler = () =>
+        setBalloonPosition(
+          app.windowManager,
+          windowId,
+          getBalloonPositionOL(map.olMap, coords),
+          app.maps.target,
+        );
+      const key = map.olMap.on('postrender', handler);
       listeners.push(() => unByKey(key));
     }
   };

package/src/featureInfo/featureInfo.js

@@ -69,7 +69,9 @@ export function getHighlightStyle(feature, layer, defaultFillColor) {
     if (typeof style === 'function') {
       style = style(feature, 1);
     }
-    style = style?.clone?.() ?? new VectorStyleItem(getDefaultVectorStyleItemOptions()).style;
+    style =
+      style?.clone?.() ??
+      new VectorStyleItem(getDefaultVectorStyleItemOptions()).style;
     if (style.getText()) {
       if (style.getText().getFill()) {
         style.getText().getFill().setColor(fillColor.toCssColorString());
@@ -102,10 +104,9 @@ export function createFeatureInfoSession(app) {
   /** @type {function():void} */
   let stop;
   const interaction = new FeatureInfoInteraction(app.featureInfo);
-  const listener = eventHandler.addExclusiveInteraction(
-    interaction,
-    () => { stop?.(); },
-  );
+  const listener = eventHandler.addExclusiveInteraction(interaction, () => {
+    stop?.();
+  });
   const currentFeatureInteractionEvent = eventHandler.featureInteraction.active;
   eventHandler.featureInteraction.setActive(EventType.CLICK);
 
@@ -211,16 +212,19 @@ class FeatureInfo {
      */
     this._collection = makeOverrideCollection(
       new Collection(),
-      () => this._app.dynamicContextId,
+      () => this._app.dynamicModuleId,
       null,
-      config => getObjectFromClassRegistry(this._featureInfoClassRegistry, config),
+      (config) =>
+        getObjectFromClassRegistry(this._featureInfoClassRegistry, config),
       AbstractFeatureInfoView,
     );
     /**
      * @type {OverrideClassRegistry<AbstractFeatureInfoView>}
      * @private
      */
-    this._featureInfoClassRegistry = new OverrideClassRegistry(featureInfoClassRegistry);
+    this._featureInfoClassRegistry = new OverrideClassRegistry(
+      featureInfoClassRegistry,
+    );
     /**
      * @type {function():void|null}
      * @private
@@ -252,11 +256,10 @@ class FeatureInfo {
      */
     this._listeners = [
       this._app.maps.mapActivated.addEventListener((map) => {
-        if (
-          this._windowId &&
-          this._app.windowManager.has(this._windowId)
-        ) {
-          const { layerName } = this._app.windowManager.get(this._windowId).props;
+        if (this._windowId && this._app.windowManager.has(this._windowId)) {
+          const { layerName } = this._app.windowManager.get(
+            this._windowId,
+          ).props;
           const layer = this._app.layers.getByKey(layerName);
           if (layer && !layer.isSupported(map)) {
             this._app.windowManager.remove(this._windowId);
@@ -267,7 +270,8 @@ class FeatureInfo {
         if (
           this._windowId &&
           this._app.windowManager.has(this._windowId) &&
-          this._app.windowManager.get(this._windowId).props.layerName === layer.name
+          this._app.windowManager.get(this._windowId).props.layerName ===
+            layer.name
         ) {
           this._app.windowManager.remove(this._windowId);
         }
@@ -277,12 +281,12 @@ class FeatureInfo {
           this.clear();
         }
       }),
-      this._app.contextAdded.addEventListener(() => {
+      this._app.moduleAdded.addEventListener(() => {
         this.clear();
         this._destroyFeatureInfoTool();
         this._destroyFeatureInfoTool = setupFeatureInfoTool(this._app);
       }),
-      this._app.contextRemoved.addEventListener(() => this.clear()),
+      this._app.moduleRemoved.addEventListener(() => this.clear()),
     ];
     /**
      * A vector layer to render provided features on
@@ -301,31 +305,41 @@ class FeatureInfo {
    * @type {import("@vcmap/core").OverrideCollection<AbstractFeatureInfoView>}
    * @readonly
    */
-  get collection() { return this._collection; }
+  get collection() {
+    return this._collection;
+  }
 
   /**
    * @type {OverrideClassRegistry<AbstractFeatureInfoView>}
    * @readonly
    */
-  get classRegistry() { return this._featureInfoClassRegistry; }
+  get classRegistry() {
+    return this._featureInfoClassRegistry;
+  }
 
   /**
    * @type {VcsEvent<null|FeatureType>}
    * @readonly
    */
-  get featureChanged() { return this._featureChanged; }
+  get featureChanged() {
+    return this._featureChanged;
+  }
 
   /**
    * @type {null|FeatureType}
    * @readonly
    */
-  get selectedFeature() { return this._selectedFeature; }
+  get selectedFeature() {
+    return this._selectedFeature;
+  }
 
   /**
    * @type {null|string}
    * @readonly
    */
-  get selectedFeatureId() { return this._selectedFeatureId; }
+  get selectedFeatureId() {
+    return this._selectedFeatureId;
+  }
 
   /**
    * The window id of the current features FeatureInfoView window
@@ -360,14 +374,18 @@ class FeatureInfo {
     const layer = this._app.layers.getByKey(feature[vcsLayerName]);
     const name = layer?.properties?.featureInfo;
     if (!name) {
-      getLogger().debug(`No view has been configured for layer '${layer?.name}'.`);
+      getLogger().debug(
+        `No view has been configured for layer '${layer?.name}'.`,
+      );
       return null;
     }
     if (!this._collection.hasKey(name)) {
       getLogger().warning(`No view with name '${name}' has been registered.`);
       return null;
     }
-    return /** @type {AbstractFeatureInfoView} */ this._collection.getByKey(name);
+    return /** @type {AbstractFeatureInfoView} */ this._collection.getByKey(
+      name,
+    );
   }
 
   /**
@@ -384,12 +402,18 @@ class FeatureInfo {
    * @returns {Promise<void>}
    */
   async selectFeature(feature, position, windowPosition, featureInfoView) {
-    check(feature, [Feature, Entity, Cesium3DTileFeature, Cesium3DTilePointFeature]);
+    check(feature, [
+      Feature,
+      Entity,
+      Cesium3DTileFeature,
+      Cesium3DTilePointFeature,
+    ]);
     checkMaybe(position, [Number]);
     checkMaybe(windowPosition, [Number]);
     checkMaybe(featureInfoView, AbstractFeatureInfoView);
 
-    const usedFeatureInfoView = feature[featureInfoViewSymbol] ??
+    const usedFeatureInfoView =
+      feature[featureInfoViewSymbol] ??
       featureInfoView ??
       this._getFeatureInfoViewForFeature(feature);
     const layer = this._app.layers.getByKey(feature[vcsLayerName]);
@@ -404,20 +428,24 @@ class FeatureInfo {
           [featureId]: getHighlightStyle(
             feature,
             layer,
-            this._app.uiConfig.config.value.primaryColor ?? getDefaultPrimaryColor(),
+            this._app.uiConfig.config.value.primaryColor ??
+              getDefaultPrimaryColor(),
           ),
         });
-        this._clearHighlightingCb = () => this._scratchLayer.featureVisibility.unHighlight([featureId]);
+        this._clearHighlightingCb = () =>
+          this._scratchLayer.featureVisibility.unHighlight([featureId]);
       } else if (layer.featureVisibility) {
         const featureId = feature.getId();
         layer.featureVisibility.highlight({
           [featureId]: getHighlightStyle(
             feature,
             layer,
-            this._app.uiConfig.config.value.primaryColor ?? getDefaultPrimaryColor(),
+            this._app.uiConfig.config.value.primaryColor ??
+              getDefaultPrimaryColor(),
           ),
         });
-        this._clearHighlightingCb = () => layer.featureVisibility.unHighlight([featureId]);
+        this._clearHighlightingCb = () =>
+          layer.featureVisibility.unHighlight([featureId]);
       }
       this._windowId = usedFeatureInfoView.className; // use className for a type based position caching
       this._app.windowManager.add(
@@ -481,7 +509,7 @@ class FeatureInfo {
       this._app.layers.remove(this._scratchLayer);
       this._scratchLayer.destroy();
     }
-    this._listeners.forEach(cb => cb());
+    this._listeners.forEach((cb) => cb());
     this._listeners.splice(0);
     this._collection.destroy();
     this._featureInfoClassRegistry.destroy();
@@ -489,7 +517,19 @@ class FeatureInfo {
 }
 
 export default FeatureInfo;
-featureInfoClassRegistry.registerClass(TableFeatureInfoView.className, TableFeatureInfoView);
-featureInfoClassRegistry.registerClass(IframeFeatureInfoView.className, IframeFeatureInfoView);
-featureInfoClassRegistry.registerClass(BalloonFeatureInfoView.className, BalloonFeatureInfoView);
-featureInfoClassRegistry.registerClass(AddressBalloonFeatureInfoView.className, AddressBalloonFeatureInfoView);
+featureInfoClassRegistry.registerClass(
+  TableFeatureInfoView.className,
+  TableFeatureInfoView,
+);
+featureInfoClassRegistry.registerClass(
+  IframeFeatureInfoView.className,
+  IframeFeatureInfoView,
+);
+featureInfoClassRegistry.registerClass(
+  BalloonFeatureInfoView.className,
+  BalloonFeatureInfoView,
+);
+featureInfoClassRegistry.registerClass(
+  AddressBalloonFeatureInfoView.className,
+  AddressBalloonFeatureInfoView,
+);

package/src/featureInfo/featureInfoInteraction.js

@@ -1,4 +1,8 @@
-import { AbstractInteraction, EventType, ModificationKeyType } from '@vcmap/core';
+import {
+  AbstractInteraction,
+  EventType,
+  ModificationKeyType,
+} from '@vcmap/core';
 
 /**
  * @class
@@ -24,13 +28,15 @@ class FeatureInfoInteraction extends AbstractInteraction {
    */
   async pipe(event) {
     if (event.feature) {
-      if (!this._featureInfo.selectedFeature || event.feature.getId() !== this._featureInfo.selectedFeatureId) {
+      if (
+        !this._featureInfo.selectedFeature ||
+        event.feature.getId() !== this._featureInfo.selectedFeatureId
+      ) {
         event.stopPropagation = true;
-        await this._featureInfo.selectFeature(
-          event.feature,
-          event.position,
-          [event.windowPosition.x, event.windowPosition.y],
-        );
+        await this._featureInfo.selectFeature(event.feature, event.position, [
+          event.windowPosition.x,
+          event.windowPosition.y,
+        ]);
       }
     } else {
       await this._featureInfo.clear();

package/src/featureInfo/iframeFeatureInfoView.js

@@ -41,7 +41,9 @@ class IframeFeatureInfoView extends AbstractFeatureInfoView {
   /**
    * @type {string}
    */
-  static get className() { return 'IframeFeatureInfoView'; }
+  static get className() {
+    return 'IframeFeatureInfoView';
+  }
 
   /**
    * @param {IframeFeatureInfoViewOptions} options

package/src/featureInfo/tableFeatureInfoView.js

@@ -27,7 +27,9 @@ class TableFeatureInfoView extends AbstractFeatureInfoView {
   /**
    * @type {string}
    */
-  static get className() { return 'TableFeatureInfoView'; }
+  static get className() {
+    return 'TableFeatureInfoView';
+  }
 
   /** @returns {TableFeatureInfoViewOptions} */
   static getDefaultOptions() {
@@ -47,13 +49,16 @@ class TableFeatureInfoView extends AbstractFeatureInfoView {
     /**
      * @type {number[]}
      */
-    this.itemsPerPageArray = options.itemsPerPageArray || defaultOptions.itemsPerPageArray;
+    this.itemsPerPageArray =
+      options.itemsPerPageArray || defaultOptions.itemsPerPageArray;
 
     const itemsPerPage = options.itemsPerPage || defaultOptions.itemsPerPage;
     /**
      * @type {number}
      */
-    this.itemsPerPage = this.itemsPerPageArray.includes(itemsPerPage) ? itemsPerPage : this.itemsPerPageArray[0];
+    this.itemsPerPage = this.itemsPerPageArray.includes(itemsPerPage)
+      ? itemsPerPage
+      : this.itemsPerPageArray[0];
     /**
      * @type {boolean}
      */
@@ -90,8 +95,13 @@ class TableFeatureInfoView extends AbstractFeatureInfoView {
   toJSON() {
     const config = super.toJSON();
     const defaultOptions = TableFeatureInfoView.getDefaultOptions();
-    if (this.itemsPerPageArray.length !== defaultOptions.itemsPerPageArray.length ||
-      this.itemsPerPageArray.some((e, idx) => e !== defaultOptions.itemsPerPageArray[idx])) {
+    if (
+      this.itemsPerPageArray.length !==
+        defaultOptions.itemsPerPageArray.length ||
+      this.itemsPerPageArray.some(
+        (e, idx) => e !== defaultOptions.itemsPerPageArray[idx],
+      )
+    ) {
       config.itemsPerPageArray = this.itemsPerPageArray;
     }
     if (this.itemsPerPage !== defaultOptions.itemsPerPage) {

package/src/i18n/de.js

@@ -55,11 +55,15 @@ const messages = {
     vcsTable: {
       key: 'Name',
       value: 'Wert',
+    },
+    vcsDataTable: {
       searchbarPlaceholder: 'Name, Wert, ...',
       itemsPerPage: 'pro Seite',
       ofItems: 'von',
       nextPage: 'Nächste Seite',
       formerPage: 'Vorherige Seite',
+      noDataPlaceholder: 'Keine Daten verfügbar',
+      noResultsPlaceholder: 'Keine übereinstimmenden Einträge gefunden',
     },
   },
   settings: {
@@ -89,6 +93,7 @@ const messages = {
     select: 'Suchergebnis selektieren',
     placeholder: 'Suche nach Straße, Adresse, Ort, POI',
     zoomToFeatureAction: 'Auf Ergebnis zoomen',
+    zoomToAll: 'Zu allen Ergebnissen zoomen',
   },
   toolbox: {
     flight: 'Flug',
@@ -107,6 +112,9 @@ const messages = {
     information: 'Information',
     success: 'Erfolg',
   },
+  datePicker: {
+    today: 'Heute',
+  },
 };
 
 export default messages;

package/src/i18n/en.js

@@ -55,11 +55,15 @@ const messages = {
     vcsTable: {
       key: 'Name',
       value: 'Value',
+    },
+    vcsDataTable: {
       searchbarPlaceholder: 'Name, Value, ...',
       itemsPerPage: 'per page',
       ofItems: 'of',
       nextPage: 'Next page',
       formerPage: 'Former page',
+      noDataPlaceholder: 'No data available',
+      noResultsPlaceholder: 'No matching records found',
     },
   },
   settings: {
@@ -89,6 +93,7 @@ const messages = {
     select: 'Select result item',
     placeholder: 'Search for Street, Address, Landmark, POI',
     zoomToFeatureAction: 'Zoom to result',
+    zoomToAll: 'Zoom to all',
   },
   toolbox: {
     flight: 'flight',
@@ -107,6 +112,9 @@ const messages = {
     information: 'Information',
     success: 'Success',
   },
+  datePicker: {
+    today: 'Today',
+  },
 };
 
 export default messages;