@vcmap/ui 5.0.0-rc.23 → 5.0.0-rc.25

package/src/featureInfo/featureInfo.js

@@ -1,11 +1,8 @@
 import {
   EventType,
-  makeOverrideCollection,
   Collection,
-  getObjectFromClassRegistry,
   VcsEvent,
   vcsLayerName,
-  OverrideClassRegistry,
   ClassRegistry,
   fromCesiumColor,
   VectorLayer,
@@ -69,7 +66,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 +101,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);
 
@@ -154,23 +152,49 @@ function setupFeatureInfoTool(app) {
     },
   };
 
-  if (app.uiConfig.getByKey('startingFeatureInfo')?.value !== false) {
-    action.callback();
+  function addFeatureInfoButton() {
+    if (app.uiConfig.getByKey('startingFeatureInfo')?.value !== false) {
+      action.callback();
+    }
+    app.toolboxManager.add(
+      {
+        id: 'featureInfo',
+        type: ToolboxType.SINGLE,
+        action,
+      },
+      vcsAppSymbol,
+    );
   }
-  app.toolboxManager.add(
-    {
-      id: 'featureInfo',
-      type: ToolboxType.SINGLE,
-      action,
-    },
-    vcsAppSymbol,
-  );
+
+  if ([...app.layers].some((l) => l.properties?.featureInfo)) {
+    addFeatureInfoButton();
+  }
+
+  const listeners = [
+    app.layers.added.addEventListener((layer) => {
+      if (
+        layer?.properties?.featureInfo &&
+        !app.toolboxManager.has('featureInfo')
+      ) {
+        addFeatureInfoButton();
+      }
+    }),
+    app.layers.removed.addEventListener(() => {
+      if (
+        ![...app.layers].some((l) => l.properties?.featureInfo) &&
+        app.toolboxManager.has('featureInfo')
+      ) {
+        app.toolboxManager.remove('featureInfo');
+      }
+    }),
+  ];
 
   return () => {
     if (session) {
       session.stop();
     }
     app.toolboxManager.remove('featureInfo');
+    listeners.forEach((cb) => cb());
   };
 }
 
@@ -193,34 +217,22 @@ export const featureInfoViewSymbol = Symbol('featureInfoView');
 
 /**
  * @class FeatureInfo
- * @description Provides registration of featureInfoClasses and stores featureInfoView instances in its collection.
+ * @description Provides registration of featureInfoClasses and stores featureInfoView instances.
+ * @extends {Collection<AbstractFeatureInfoView>}
+ * @implements {import("@vcmap/core").OverrideCollectionInterface<AbstractFeatureInfoView>}
  */
-class FeatureInfo {
+class FeatureInfo extends Collection {
   /**
    * @param {VcsUiApp} app
    */
   constructor(app) {
+    super();
+
     /**
      * @type {VcsUiApp}
      * @private
      */
     this._app = app;
-    /**
-     * @type {import("@vcmap/core").OverrideCollection<AbstractFeatureInfoView>}
-     * @private
-     */
-    this._collection = makeOverrideCollection(
-      new Collection(),
-      () => this._app.dynamicModuleId,
-      null,
-      config => getObjectFromClassRegistry(this._featureInfoClassRegistry, config),
-      AbstractFeatureInfoView,
-    );
-    /**
-     * @type {OverrideClassRegistry<AbstractFeatureInfoView>}
-     * @private
-     */
-    this._featureInfoClassRegistry = new OverrideClassRegistry(featureInfoClassRegistry);
     /**
      * @type {function():void|null}
      * @private
@@ -252,11 +264,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 +278,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);
         }
@@ -297,35 +309,29 @@ class FeatureInfo {
     this._destroyFeatureInfoTool = setupFeatureInfoTool(this._app);
   }
 
-  /**
-   * @type {import("@vcmap/core").OverrideCollection<AbstractFeatureInfoView>}
-   * @readonly
-   */
-  get collection() { return this._collection; }
-
-  /**
-   * @type {OverrideClassRegistry<AbstractFeatureInfoView>}
-   * @readonly
-   */
-  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 +366,16 @@ 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)) {
+    if (!this.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.getByKey(name);
   }
 
   /**
@@ -384,12 +392,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 +418,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(
@@ -474,6 +492,7 @@ class FeatureInfo {
    * Destroys the feature info and all its events & listeners
    */
   destroy() {
+    super.destroy();
     this._clearInternal();
     this._featureChanged.destroy();
     this._destroyFeatureInfoTool();
@@ -481,15 +500,25 @@ 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();
   }
 }
 
 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

@@ -14,6 +14,7 @@ const messages = {
   },
   content: {
     title: 'Inhalte',
+    empty: 'Aktuell sind keine Einträge verfügbar.',
     search: {
       placeholder: 'Elemente suchen',
     },
@@ -41,8 +42,10 @@ const messages = {
     homeButton: 'Springe zur Startansicht',
   },
   categoryManager: {
-    title: 'Komponenten',
-    tooltip: 'Komponenten',
+    title: 'Mein Arbeitsbereich',
+    tooltip: 'Mein Arbeitsbereich',
+  },
+  collectionManager: {
     more: 'Weitere anzeigen...',
     empty: 'Es gibt noch keine Einträge.',
   },

package/src/i18n/en.js

@@ -14,6 +14,7 @@ const messages = {
   },
   content: {
     title: 'Content',
+    empty: 'Currently there are no entries available.',
     search: {
       placeholder: 'Search elements',
     },
@@ -41,8 +42,10 @@ const messages = {
     homeButton: 'Go to starting view',
   },
   categoryManager: {
-    title: 'Components',
-    tooltip: 'Components',
+    title: 'My Workspace',
+    tooltip: 'My Workspace',
+  },
+  collectionManager: {
     more: 'Show more...',
     empty: 'There are no entries yet.',
   },