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

package/src/components/form-inputs-controls/VcsTextField.vue

@@ -18,9 +18,9 @@
           @blur="onBlur"
           @keydown.esc="onEscape"
           @keydown="$emit('keydown', $event)"
-          :value="visibleValue"
           :type="type"
           outlined
+          v-model="visibleValue"
           v-bind="{ ...$attrs, ...attrs }"
           v-on="{ ...$listeners, ...on }"
           :height="isDense ? 24 : 32"
@@ -127,6 +127,12 @@
       .v-text-field__suffix {
         padding-left: 4px;
       }
+      .v-input__prepend-outer {
+        margin-right: 4px;
+      }
+      .v-icon {
+        font-size: 16px;
+      }
       fieldset {
         border-radius: 2px;
         border-color: var(--v-base-base);
@@ -212,18 +218,23 @@
           !(attrs.disabled || attrs.disabled === '')
         );
       });
-      const visibleValue = computed(() => {
-        if (
-          attrs.type === 'number' &&
-          attrs.value &&
-          props.unit &&
-          !focus.value &&
-          !hover.value
-        ) {
-          return `${attrs.value} ${props.unit}`;
-        } else {
-          return attrs.value || '';
-        }
+      const visibleValue = computed({
+        get() {
+          if (
+            attrs.type === 'number' &&
+            attrs.value &&
+            props.unit &&
+            !focus.value &&
+            !hover.value
+          ) {
+            return `${attrs.value} ${props.unit}`;
+          } else {
+            return attrs.value ?? '';
+          }
+        },
+        set(event) {
+          emit('input', event);
+        },
       });
       const type = computed(() => {
         if (attrs.type === 'number' && !focus.value) {

package/src/components/form-inputs-controls/VcsWizard.vue

@@ -3,7 +3,7 @@
     vertical
     :value="value"
     @change="(newValue) => $emit('input', newValue)"
-    class="rounded-0"
+    class="rounded-0 pb-1"
   >
     <slot />
   </v-stepper>
@@ -41,15 +41,15 @@
           .v-stepper__label {
             color: map-get($shades, 'black');
           }
-          &--active {
-            background-color: rgba(34, 34, 34, 0.1);
+          &--complete {
             .v-stepper__label {
-              color: var(--v-primary-base);
+              color: map-get($shades, 'black');
             }
           }
-          &--complete {
+          &--active {
+            background-color: rgba(34, 34, 34, 0.1);
             .v-stepper__label {
-              color: map-get($shades, 'black');
+              color: var(--v-primary-base);
             }
           }
           .v-stepper__step__step::before {
@@ -68,15 +68,15 @@
           .v-stepper__label {
             color: map-get($shades, 'white');
           }
-          &--active {
-            background-color: rgba(255, 255, 255, 0.17);
+          &--complete {
             .v-stepper__label {
-              color: var(--v-primary-base);
+              color: map-get($shades, 'white');
             }
           }
-          &--complete {
+          &--active {
+            background-color: rgba(255, 255, 255, 0.17);
             .v-stepper__label {
-              color: map-get($shades, 'white');
+              color: var(--v-primary-base);
             }
           }
           .v-stepper__step__step {
@@ -113,7 +113,6 @@
           color: transparent;
           position: relative;
           margin-top: 1px;
-          margin-right: 5px;
           &:before {
             content: '\25cf';
             font-size: 18px;
@@ -130,8 +129,8 @@
           }
         }
       }
-      .v-stepper__content.v-stepper__wrapper {
-        margin: 4px 0;
+      .v-stepper__content .v-stepper__wrapper {
+        margin: 4px 0 4px 4px;
       }
     }
   }

package/src/components/form-inputs-controls/VcsWizardStep.vue

@@ -16,7 +16,6 @@
           v-if="Number(step) === Number(value)"
           :actions="actions"
           :overflow-count="actionButtonListOverflowCount"
-          small
           @mousedown.stop
           @touchstart.stop
           @keydown.stop

package/src/components/lists/VcsList.vue

@@ -41,7 +41,6 @@
             :actions="actions"
             :block-overflow="true"
             :overflow-count="actionButtonListOverflowCount"
-            small
           />
         </v-list-item-content>
       </v-list-item>
@@ -109,7 +108,6 @@
             :actions="item.actions"
             :block-overflow="true"
             :overflow-count="actionButtonListOverflowCount"
-            small
           />
         </v-list-item-action>
       </v-list-item>
@@ -565,6 +563,9 @@
           .v-icon {
             font-size: 16px;
           }
+          &:last-child {
+            min-width: auto;
+          }
         }
         .v-list-item__content {
           flex-wrap: nowrap;

package/src/components/lists/VcsTreeviewLeaf.vue

@@ -25,7 +25,6 @@
       :actions="item.actions"
       :block-overflow="true"
       :overflow-count="3"
-      small
       right
       class="col-4 pa-0 d-flex align-center"
     />

package/src/components/tables/VcsDataTable.vue

@@ -83,7 +83,7 @@
           <v-row dense no-gutters justify="center" class="align-center">
             <v-menu offset-y dense>
               <template #activator="{ on, attrs }">
-                <VcsButton small color="primary" v-bind="attrs" v-on="on">
+                <VcsButton color="primary" v-bind="attrs" v-on="on">
                   {{ itemsPerPageRef }}
                   <v-icon>mdi-chevron-down</v-icon>
                 </VcsButton>
@@ -107,7 +107,6 @@
               {{ $t('components.vcsDataTable.ofItems') }} {{ numberOfItems }}
             </span>
             <VcsButton
-              small
               icon="mdi-chevron-left"
               @click="formerPage"
               tooltip="components.vcsDataTable.formerPage"
@@ -115,7 +114,6 @@
               class="ml-1"
             />
             <VcsButton
-              small
               icon="mdi-chevron-right"
               @click="nextPage"
               tooltip="components.vcsDataTable.nextPage"
@@ -375,7 +373,7 @@
           }
         }
 
-        .v-btn.vcs-button--small {
+        .v-btn.vcs-button {
           height: 100% !important;
           display: block;
         }

package/src/contentTree/LayerTree.vue

@@ -1,16 +1,22 @@
 <template>
-  <VcsTreeview
-    v-if="tree && tree.length"
-    :items="tree"
-    :open.sync="open"
-    :show-searchbar="true"
-    :searchbar-placeholder="'content.search.placeholder'"
-    item-children="visibleChildren"
-  />
+  <div>
+    <VcsTreeview
+      v-if="tree && tree.length"
+      :items="tree"
+      :open.sync="open"
+      :show-searchbar="true"
+      :searchbar-placeholder="'content.search.placeholder'"
+      item-children="visibleChildren"
+    />
+    <v-sheet v-else class="ma-2">
+      {{ $t('content.empty') }}
+    </v-sheet>
+  </div>
 </template>
 
 <script>
   import { inject } from 'vue';
+  import { VSheet } from 'vuetify/lib';
   import VcsTreeview from '../components/lists/VcsTreeview.vue';
 
   /**
@@ -19,7 +25,7 @@
    */
   export default {
     name: 'VcsLayerTree',
-    components: { VcsTreeview },
+    components: { VcsTreeview, VSheet },
     props: {
       windowState: {
         type: Object,

package/src/contentTree/contentTreeCollection.js

@@ -141,7 +141,7 @@ class ContentTreeCollection extends IndexedCollection {
     );
 
     this._app.navbarManager.add(
-      { id, action },
+      { id, action, weight: 100 },
       vcsAppSymbol,
       ButtonLocation.CONTENT,
     );

package/src/contentTree/contentTreeItem.js

@@ -7,6 +7,7 @@ import {
   createStateRefAction,
   StateActionState,
 } from '../actions/stateRefAction.js';
+import { executeCallbacks } from '../callback/vcsCallback.js';
 
 /**
  * @typedef {Object} ContentTreeItemOptions
@@ -17,6 +18,9 @@ import {
  * @property {number} [weight] - optional weighting of the item. higher weights come first.
  * @property {string} [infoUrl] - optional info url providing link with additional information.
  * @property {boolean} [initOpen=false] - groups being initially open or not.
+ * @property {VcsCallbackOptions} [onClick] - optional callback actions executed on click
+ * @property {VcsCallbackOptions} [onActivate] - optional callback actions executed on activation of the item
+ * @property {VcsCallbackOptions} [onDeactivate] - optional callback actions executed on deactivation of the item
  */
 
 /**
@@ -157,7 +161,21 @@ class ContentTreeItem {
      * @type {boolean}
      */
     this.initOpen = parseBoolean(options.initOpen, false);
-
+    /**
+     * @type {Array<VcsCallbackOptions>}
+     * @protected
+     */
+    this._onClick = options.onClick ?? [];
+    /**
+     * @type {Array<VcsCallbackOptions>}
+     * @protected
+     */
+    this._onActivate = options.onActivate ?? [];
+    /**
+     * @type {Array<VcsCallbackOptions>}
+     * @protected
+     */
+    this._onDeactivate = options.onDeactivate ?? [];
     /**
      * @type {VcsEvent<number>}
      */
@@ -426,8 +444,9 @@ class ContentTreeItem {
    * A callback called once the item is clicked.
    * @returns {Promise<void>}
    */
-  // eslint-disable-next-line class-methods-use-this,no-empty-function
-  async clicked() {}
+  async clicked() {
+    executeCallbacks(this._app, this._onClick);
+  }
 
   /**
    * Returns a readonly TreeViewItem used for rendering the current item.

package/src/contentTree/groupContentTreeItem.js

@@ -59,6 +59,7 @@ class GroupContentTreeItem extends ContentTreeItem {
   }
 
   async clicked() {
+    await super.clicked();
     if (this.state === StateActionState.NONE) {
       return;
     }

package/src/contentTree/layerContentTreeItem.js

@@ -9,11 +9,11 @@ import component from '../actions/styleSelector.vue';
 import VcsObjectContentTreeItem from './vcsObjectContentTreeItem.js';
 import { vcsAppSymbol } from '../pluginHelper.js';
 import { contentTreeClassRegistry } from './contentTreeItem.js';
+import { executeCallbacks } from '../callback/vcsCallback.js';
 
 /**
  * @typedef {ContentTreeItemOptions} LayerContentTreeItemOptions
  * @property {string} layerName
- * @property {Array<string>} layerNamesToDeactivate list of LayerNames which should be deactivated if the click activates the layer
  */
 
 /**
@@ -86,14 +86,6 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
      */
     this._layerName = options.layerName;
 
-    /**
-     * @type {Array<string>}
-     * @private
-     */
-    this._layerNamesToDeactivate = Array.isArray(options.layerNamesToDeactivate)
-      ? options.layerNamesToDeactivate.slice()
-      : [];
-
     /**
      * @type {Array<Function>}
      * @private
@@ -238,15 +230,14 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
   }
 
   async clicked() {
+    await super.clicked();
     if (this._layer) {
       if (this.state === StateActionState.INACTIVE) {
         await this._layer.activate();
-        this._layerNamesToDeactivate
-          .map((n) => this._app.layers.getByKey(n))
-          .filter((l) => l)
-          .forEach((l) => l.deactivate());
+        executeCallbacks(this._app, this._onActivate);
       } else {
         this._layer.deactivate();
+        executeCallbacks(this._app, this._onDeactivate);
       }
     }
   }
@@ -257,7 +248,6 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
   toJSON() {
     const config = super.toJSON();
     config.layerName = this._layerName;
-    config.layerNamesToDeactivate = this._layerNamesToDeactivate.slice();
     return config;
   }
 

package/src/contentTree/layerGroupContentTreeItem.js

@@ -6,11 +6,11 @@ import {
   setViewpointAction,
 } from './layerContentTreeItem.js';
 import { StateActionState } from '../actions/stateRefAction.js';
+import { executeCallbacks } from '../callback/vcsCallback.js';
 
 /**
  * @typedef {ContentTreeItemOptions} LayerGroupContentTreeItemOptions
  * @property {Array<string>} layerNames list of LayerNames which should be activated on click
- * @property {Array<string>} layerNamesToDeactivate list of LayerNames which should be deactivated on click if the click activates the layer in layerNames
  * @property {string} [defaultViewpoint] - the name of an optional default viewpoint
  */
 
@@ -63,14 +63,6 @@ class LayerGroupContentTreeItem extends ContentTreeItem {
       ? options.layerNames.slice()
       : [];
 
-    /**
-     * @type {Array<string>}
-     * @private
-     */
-    this._layerNamesToDeactivate = Array.isArray(options.layerNamesToDeactivate)
-      ? options.layerNamesToDeactivate.slice()
-      : [];
-
     /**
      * @type {Array<function():void>}
      * @private
@@ -152,18 +144,17 @@ class LayerGroupContentTreeItem extends ContentTreeItem {
    * @returns {Promise<void>}
    */
   async clicked() {
+    await super.clicked();
     const layers = this._layers;
     const activate = layers.some((l) => !(l.active || l.loading));
     if (activate) {
       await Promise.all(layers.map((l) => l.activate()));
-      this._layerNamesToDeactivate
-        .map((n) => this._app.layers.getByKey(n))
-        .filter((l) => l)
-        .forEach((l) => l.deactivate());
+      executeCallbacks(this._app, this._onActivate);
     } else {
       layers.forEach((l) => {
         l.deactivate();
       });
+      executeCallbacks(this._app, this._onDeactivate);
     }
   }
 
@@ -173,7 +164,6 @@ class LayerGroupContentTreeItem extends ContentTreeItem {
   toJSON() {
     const config = super.toJSON();
     config.layerNames = this._layerNames.slice();
-    config.layerNamesToDeactivate = this._layerNamesToDeactivate.slice();
     if (this._defaultViewpoint) {
       config.defaultViewpoint = this._defaultViewpoint;
     }

package/src/contentTree/obliqueCollectionContentTreeItem.js

@@ -3,6 +3,7 @@ import VcsObjectContentTreeItem from './vcsObjectContentTreeItem.js';
 import { setViewpointAction } from './layerContentTreeItem.js';
 import { StateActionState } from '../actions/stateRefAction.js';
 import { contentTreeClassRegistry } from './contentTreeItem.js';
+import { executeCallbacks } from '../callback/vcsCallback.js';
 
 /**
  * @typedef {ContentTreeItemOptions} ObliqueCollectionContentTreeItemOptions
@@ -139,6 +140,7 @@ class ObliqueCollectionContentTreeItem extends VcsObjectContentTreeItem {
   }
 
   async clicked() {
+    await super.clicked();
     if (
       this.visible &&
       this._collection &&
@@ -151,9 +153,11 @@ class ObliqueCollectionContentTreeItem extends VcsObjectContentTreeItem {
       if (this.state === StateActionState.INACTIVE) {
         this.state = StateActionState.LOADING;
         await map.setCollection(this._collection, vp);
+        executeCallbacks(this._app, this._onActivate);
       } else if (this.state === StateActionState.ACTIVE) {
         this.state = StateActionState.INACTIVE;
         await map.setCollection(defaultCollection, vp);
+        executeCallbacks(this._app, this._onDeactivate);
       }
     }
   }

package/src/contentTree/viewpointContentTreeItem.js

@@ -89,6 +89,7 @@ class ViewpointContentTreeItem extends VcsObjectContentTreeItem {
   }
 
   async clicked() {
+    await super.clicked();
     if (this._app.maps.activeMap && this.viewpoint) {
       await this._app.maps.activeMap.gotoViewpoint(this.viewpoint);
     }

package/src/featureInfo/BalloonComponent.vue

@@ -17,7 +17,6 @@
         </v-list-item-content>
         <VcsButton
           @click.stop="close"
-          small
           icon="mdi-close-thick"
           tooltip="components.close"
           class="d-flex"

package/src/featureInfo/abstractFeatureInfoView.js

@@ -172,6 +172,21 @@ export function applyAttributeFilter(attributes, keys, result = {}) {
   return result;
 }
 
+/**
+ * Filters all olcs attributes, not provided as keys
+ * @param {Object<string, *>} attributes
+ * @param {Array<string>} keys
+ * @returns {Object}
+ */
+export function applyOlcsAttributeFilter(attributes, keys = []) {
+  return Object.keys(attributes)
+    .filter((key) => keys.includes(key) || !/^olcs_/.test(key))
+    .reduce((obj, key) => {
+      obj[key] = attributes[key];
+      return obj;
+    }, {});
+}
+
 /**
  * Abstract class to be extended by FeatureInfoView classes
  * Subclasses must always provide a component and may overwrite class methods.
@@ -265,7 +280,7 @@ class AbstractFeatureInfoView extends VcsObject {
     if (this.keyMapping) {
       applyKeyMapping(attributes, this.keyMapping);
     }
-    return attributes;
+    return applyOlcsAttributeFilter(attributes, this.attributeKeys);
   }
 
   /**

package/src/featureInfo/featureInfo.js

@@ -1,11 +1,8 @@
 import {
   EventType,
-  makeOverrideCollection,
   Collection,
-  getObjectFromClassRegistry,
   VcsEvent,
   vcsLayerName,
-  OverrideClassRegistry,
   ClassRegistry,
   fromCesiumColor,
   VectorLayer,
@@ -155,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());
   };
 }
 
@@ -194,37 +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
@@ -301,22 +309,6 @@ 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
@@ -379,13 +371,11 @@ class FeatureInfo {
       );
       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);
   }
 
   /**
@@ -502,6 +492,7 @@ class FeatureInfo {
    * Destroys the feature info and all its events & listeners
    */
   destroy() {
+    super.destroy();
     this._clearInternal();
     this._featureChanged.destroy();
     this._destroyFeatureInfoTool();
@@ -511,8 +502,6 @@ class FeatureInfo {
     }
     this._listeners.forEach((cb) => cb());
     this._listeners.splice(0);
-    this._collection.destroy();
-    this._featureInfoClassRegistry.destroy();
   }
 }