@vcmap/ui 5.0.0-rc.10 → 5.0.0-rc.13

package/src/contentTree/layerGroupContentTreeItem.js

@@ -4,7 +4,8 @@ import { StateActionState } from '../actions/stateRefAction.js';
 
 /**
  * @typedef {ContentTreeItemOptions} LayerGroupContentTreeItemOptions
- * @property {Array<string>} layerNames
+ * @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
  */
 
@@ -55,6 +56,14 @@ 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
@@ -122,11 +131,18 @@ class LayerGroupContentTreeItem extends ContentTreeItem {
     }));
   }
 
+  /**
+   * @returns {Promise<void>}
+   */
   async 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());
     } else {
       layers.forEach((l) => { l.deactivate(); });
     }
@@ -138,12 +154,16 @@ 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;
     }
     return config;
   }
 
+  /**
+   * @inheritDoc
+   */
   destroy() {
     this._clearListeners();
     super.destroy();

package/src/contentTree/nodeContentTreeItem.js

@@ -1,4 +1,4 @@
-import { watch } from '@vue/composition-api';
+import { watch } from 'vue';
 import ContentTreeItem, { contentTreeClassRegistry } from './contentTreeItem.js';
 
 /**

package/src/featureInfo/AddressBalloonComponent.vue

@@ -0,0 +1,47 @@
+<template>
+  <BalloonComponent
+    v-bind="{...$attrs}"
+  >
+    <template #default="{ attrs }">
+      <v-list-item two-line v-if="Object.values(attrs.attributes).length > 0">
+        <v-list-item-avatar
+          tile
+          size="40"
+        >
+          <v-icon size="20" color="secondary">
+            $vcsHomePoint
+          </v-icon>
+        </v-list-item-avatar>
+        <v-list-item-content>
+          <v-list-item-title v-if="attrs.attributes.addressName">
+            {{ attrs.attributes.addressName }}
+          </v-list-item-title>
+          <v-list-item-title v-else>
+            {{ attrs.attributes.street }} {{ attrs.attributes.number }}
+          </v-list-item-title>
+          <v-list-item-subtitle v-if="attrs.attributes.name">
+            {{ attrs.attributes.street }} {{ attrs.attributes.number }}
+          </v-list-item-subtitle>
+          <v-list-item-subtitle>{{ attrs.attributes.zip }} {{ attrs.attributes.city }}</v-list-item-subtitle>
+          <v-list-item-subtitle>{{ attrs.attributes.country }}</v-list-item-subtitle>
+        </v-list-item-content>
+      </v-list-item>
+    </template>
+  </BalloonComponent>
+</template>
+<script>
+
+  import BalloonComponent from './BalloonComponent.vue';
+
+  /**
+   * @description A balloon viewing address information
+   */
+  export default {
+    name: 'AddressBalloonComponent',
+    components: { BalloonComponent },
+  };
+</script>
+
+<style>
+
+</style>

package/src/featureInfo/BalloonComponent.vue

@@ -0,0 +1,140 @@
+<template>
+  <v-card
+    class="mx-auto"
+    max-width="400"
+    v-if="position"
+  >
+    <slot name="balloon-header" :attrs="{...$props, ...$attrs}">
+      <v-list-item two-line>
+        <v-list-item-avatar
+          tile
+          size="40"
+        >
+          <v-icon color="primary">
+            $vcsInfo
+          </v-icon>
+        </v-list-item-avatar>
+        <v-list-item-content>
+          <v-list-item-title class="text-h5">
+            {{ title }}
+          </v-list-item-title>
+          <v-list-item-subtitle>{{ subtitle }}</v-list-item-subtitle>
+        </v-list-item-content>
+        <VcsButton
+          @click.stop="close"
+          small
+          icon="mdi-close-thick"
+          class="mb-8"
+        />
+      </v-list-item>
+    </slot>
+
+    <v-divider />
+
+    <v-card class="overflow-y-auto" max-height="250">
+      <slot :attrs="{...$props, ...$attrs}">
+        <v-list v-for="(value, name, index) in attributes" :key="`attribute-${index}`">
+          <v-list-item>
+            <v-list-item-content>
+              <v-list-item-title>
+                {{ name }}
+              </v-list-item-title>
+              <v-list-item-subtitle>{{ value }}</v-list-item-subtitle>
+            </v-list-item-content>
+          </v-list-item>
+        </v-list>
+      </slot>
+    </v-card>
+  </v-card>
+</template>
+<script>
+
+  import { inject, onMounted, onUnmounted, watch } from 'vue';
+  import { setupBalloonPositionListener } from './balloonHelper.js';
+  import VcsButton from '../components/buttons/VcsButton.vue';
+
+  /**
+   * @description A balloon viewing feature attributes. Size dynamic dependent on number of attributes.
+   * Scrollable, if more than 6 attributes are provided.
+   * @vue-prop {string} featureId - feature's id
+   * @vue-prop {string} title - balloon title
+   * @vue-prop {string} subtitle - balloon subtitle
+   * @vue-prop {Object} attributes - feature's attributes
+   * @vue-prop {Array<import("ol/coordinate").Coordinate>} position - clicked position balloon is rendered at
+   * @vue-data {slot} [#balloon-header] - slot to override balloon header, $props and $attrs are passed to `attrs`
+   * @vue-data {slot} [#default] - slot to override balloon content, $props and $attrs are passed to `attrs`
+   */
+  export default {
+    name: 'BalloonComponent',
+    components: { VcsButton },
+    props: {
+      featureId: {
+        type: String,
+        required: true,
+      },
+      title: {
+        type: String,
+        required: true,
+      },
+      subtitle: {
+        type: String,
+        required: true,
+      },
+      attributes: {
+        type: Object,
+        required: true,
+      },
+      position: {
+        type: Array,
+        default: null,
+      },
+    },
+    setup(props, { attrs }) {
+      const app = inject('vcsApp');
+      const windowId = attrs['window-state'].id;
+
+      let balloonPositionListener = null;
+      const destroyListener = () => {
+        if (balloonPositionListener) {
+          balloonPositionListener();
+        }
+      };
+
+      onMounted(async () => {
+        balloonPositionListener = await setupBalloonPositionListener(app, windowId, props.position);
+      });
+
+      watch(() => props.featureId, async () => {
+        destroyListener();
+        balloonPositionListener = await setupBalloonPositionListener(app, windowId, props.position);
+      });
+
+      onUnmounted(() => {
+        destroyListener();
+      });
+
+      const close = () => {
+        app.windowManager.remove(attrs['window-state'].id);
+        destroyListener();
+      };
+
+      return {
+        close,
+      };
+    },
+  };
+</script>
+
+<style>
+.balloon:before {
+  content: "";
+  position: absolute;
+  bottom: -20px;
+  left: 40px;
+  border-width: 20px 20px 0;
+  border-style: solid;
+  border-color: white transparent;
+  display: block;
+  width: 0;
+}
+</style>

package/src/featureInfo/abstractFeatureInfoView.js

@@ -0,0 +1,313 @@
+import { VcsObject } from '@vcmap/core';
+import { WindowSlot } from '../manager/window/windowManager.js';
+
+/**
+ * @typedef {Object} FeatureInfoProps
+ * @property {string} featureId
+ * @property {string} layerName
+ * @property {Object} layerProperties
+ * @property {Object} attributes
+ */
+
+/**
+ * @typedef {import("@vcmap/core").VcsObjectOptions} FeatureInfoViewOptions
+ * @property {Array<string>} [attributeKeys] - list of keys to filter attributes of selected feature
+ * @property {Object<string,string>} [keyMapping] - object providing text replacements or i18n strings for attribute keys
+ * @property {Object<string, string|Object<string,string>>} [valueMapping] - object providing text replacements or i18n strings for attribute values
+ * @property {WindowComponentOptions} [window] - state, slot, position can be set. Other options are predefined.
+ */
+
+/**
+ * @param {string|Object<string,string>} mappedValue
+ * @param {string} value
+ * @returns {string}
+ */
+function getMappedValue(mappedValue, value) {
+  if (typeof mappedValue === 'string') {
+    return mappedValue.replace(/\${value}/g, value);
+  }
+  return mappedValue[value] ?? value;
+}
+
+/**
+ * Replaces values by new values according to mapping table. Nested keys are represented by a "."
+ * @param {Object<string, *>} attributes
+ * @param {Object<string, string|Object<string,string>>} mapping - value mapping
+ */
+export function applyValueMapping(attributes, mapping) {
+  Object.keys(mapping)
+    .sort((a, b) => {
+      const aLen = a.split('.').length;
+      const bLen = b.split('.').length;
+      if (aLen > bLen) {
+        return -1;
+      }
+      if (bLen > aLen) {
+        return 1;
+      }
+      return 0;
+    })
+    .forEach((mappingKey) => {
+      if (Object.hasOwn(attributes, mappingKey)) {
+        attributes[mappingKey] = getMappedValue(mapping[mappingKey], attributes[mappingKey]);
+      } else {
+        const mappingKeys = mappingKey.split('.');
+        mappingKeys.reduce((obj, key, index) => {
+          if (obj && Object.hasOwn(obj, key) && index === mappingKeys.length - 1) {
+            obj[key] = getMappedValue(mapping[mappingKey], obj[key]);
+          }
+          return obj?.[key];
+        }, attributes);
+      }
+    });
+}
+
+/**
+ * Replaces keys by new keys according to mapping table.
+ * Nested keys to replace are represented by a ".". Keys will
+ * be replaced by the given string literal. This will always lead
+ * to a new top level key or an overwritting of an existing key.
+ * Deletes old keys!
+ * @example
+ * const getAttrs = () => { foo: { bar: true }, 'foo.baz': true };
+ * const nestedMapping = { 'foo.bar': 'bar' };
+ * const nestedMappingWithPeriod = { 'foo.bar': 'bar.foo' };
+ * const flatMapping = { 'foo': 'bar' };
+ * const periodMapping = { 'foo.baz': 'foo' };
+ * // apply nested key mapping will replace nested key with top level key
+ * const nestedAttrs = applyKeyMapping(getAttrs(), nestedMapping);
+ * assert(nestedAttrs.bar === true);
+ * // apply nested key mapping with a new key with a period. will replace nested key with a top level key.
+ * const nestedAttrsWithPeriod = applyKeyMapping(getAttrs(), nestedMappingWithPeriod);
+ * assert(nestedAttrsWithPeriod['bar.foo'] === true);
+ * // apply flat mapping: will replace top level key with another top level key
+ * const flatAttrs = applyKeyMapping(getAttrs(), flatMapping);
+ * assert(flatAttrs.bar.bar === true);
+ * // apply flat mapping of a key with a period. this will overwrite an existing _other_ key
+ * const periodAttrs = applyKeyMapping(getAttrs(), periodMapping);
+ * assert(periodAttrs.foo === true);
+ * @param {Object<string, *>} attributes
+ * @param {Object<string,string>} mapping - key mapping
+ */
+export function applyKeyMapping(attributes, mapping) {
+  Object.keys(mapping)
+    .sort((a, b) => {
+      const aLen = a.split('.').length;
+      const bLen = b.split('.').length;
+      if (aLen > bLen) {
+        return -1;
+      }
+      if (bLen > aLen) {
+        return 1;
+      }
+      return 0;
+    })
+    .forEach((mappingKey) => {
+      if (Object.hasOwn(attributes, mappingKey)) {
+        attributes[mapping[mappingKey]] = attributes[mappingKey];
+        delete attributes[mappingKey];
+      } else {
+        const mappingKeys = mappingKey.split('.');
+        mappingKeys.reduce((obj, key, index) => {
+          if (obj && Object.hasOwn(obj, key) && index === mappingKeys.length - 1) {
+            attributes[mapping[mappingKey]] = obj[key];
+            delete obj[key];
+          }
+          return obj?.[key];
+        }, attributes);
+      }
+    });
+}
+
+/**
+ * Applies an attribute filtering. Nested attributes are represented by a ".".
+ * @example
+ * const attrs = { foo: { bar: true, baz: false }, bar: true, baz: true, foobar: { foo: true, bar: true } };
+ * const filter = ["foo.bar", "baz", "foobar"];
+ * const filtered = applyAttributeFilter(attrs, filter)
+ * // nested keys will also filter for their parent
+ * assert(filtered.foo.bar === true);
+ * // only keys filtered will be present
+ * assert(filtered.foo.baz === undefined);
+ * assert(filtered.bar === undefined);
+ * assert(filtered.baz === true);
+ * // if filtering parent top level keys, will pass on a reference of the actual value and its children.
+ * assert(deepEquals(filtered.foobar, attrs.foobar));
+ * @param {Object<string, *>} attributes
+ * @param {Array<string>} keys
+ * @param {Object<string, *>=} result
+ * @returns {Object<string, *>}
+ */
+export function applyAttributeFilter(attributes, keys, result = {}) {
+  const nestedKeys = {};
+  keys.forEach((k) => {
+    if (Object.hasOwn(attributes, k)) {
+      result[k] = attributes[k];
+    } else if (k.includes('.')) {
+      const [parent, ...rest] = k.split('.');
+      if (!nestedKeys[parent]) {
+        nestedKeys[parent] = [];
+      }
+      nestedKeys[parent].push(rest.join('.'));
+    }
+  });
+
+  Object.entries(nestedKeys)
+    .forEach(([parent, pKs]) => {
+      if (typeof attributes[parent] === 'object') {
+        result[parent] = {};
+        applyAttributeFilter(attributes[parent], pKs, result[parent]);
+      }
+    });
+  return result;
+}
+
+/**
+ * Abstract class to be extended by FeatureInfoView classes
+ * Subclasses must always provide a component and may overwrite class methods.
+ * @abstract
+ * @class
+ * @extends {VcsObject}
+ */
+class AbstractFeatureInfoView extends VcsObject {
+  /**
+   * @type {string}
+   */
+  static get className() { return 'AbstractFeatureInfoView'; }
+
+  /** @returns {FeatureInfoViewOptions} */
+  static getDefaultOptions() {
+    return {
+      attributeKeys: [],
+      keyMapping: undefined,
+      valueMapping: undefined,
+      window: {},
+    };
+  }
+
+  /**
+   * @param {FeatureInfoViewOptions} options
+   * @param {import("vue").Component} component
+   */
+  constructor(options, component) {
+    super(options);
+    const defaultOptions = AbstractFeatureInfoView.getDefaultOptions();
+    /**
+     * @type {string[]}
+     */
+    this.attributeKeys = options.attributeKeys || defaultOptions.attributeKeys;
+    /**
+     * @type {null|Object<string,string>}
+     */
+    this.keyMapping = options.keyMapping || defaultOptions.keyMapping;
+    /**
+     * @type {null|Object<string, string|Object<string,string>>}
+     */
+    this.valueMapping = options.valueMapping || defaultOptions.valueMapping;
+    /**
+     * @type {WindowComponentOptions|Object}
+     * @private
+     */
+    this._window = options.window || defaultOptions.window;
+    /**
+     * @type {import("vue").Component|undefined}
+     * @private
+     */
+    this._component = component;
+  }
+
+  /**
+   * window options, configured in a context, used only internally by AbstractFeatureInfoView or subclass
+   * @type {WindowComponentOptions|Object}
+   * @readonly
+   */
+  get window() { return this._window; }
+
+  /**
+   * component provided by a FeatureInfoView class, passed to featureInfo via `getWindowComponentOptions()`
+   * @type {import("vue").Component|undefined}
+   * @readonly
+   */
+  get component() { return this._component; }
+
+  /**
+   * This method returns all relevant attributes for this view.
+   * Called by `getProperties()` to pass attributes as props object to the VueComponent of this view.
+   * May be overwritten by classes extending AbstractFeatureInfoView.
+   * It filters attributes of the feature by keys, performs value and key mapping, if provided.
+   * @param {undefined|import("ol").Feature<import("ol/geom/Geometry").default>|import("@vcmap/cesium").Cesium3DTileFeature|import("@vcmap/cesium").Cesium3DTilePointFeature} feature
+   * @returns {Object}
+   */
+  getAttributes(feature) {
+    let attributes = feature.getProperty('attributes') || {};
+    if (this.attributeKeys.length > 0) {
+      attributes = applyAttributeFilter(attributes, this.attributeKeys);
+    }
+    if (this.valueMapping) {
+      applyValueMapping(attributes, this.valueMapping);
+    }
+    if (this.keyMapping) {
+      applyKeyMapping(attributes, this.keyMapping);
+    }
+    return attributes;
+  }
+
+  /**
+   * This method returns all relevant properties passed to the VueComponent of this view.
+   * May be overwritten by classes extending AbstractFeatureInfoView.
+   * Called by `getWindowComponentOptions()`.
+   * @param {FeatureInfoEvent} featureInfo
+   * @param {import("@vcmap/core").Layer} layer
+   * @returns {FeatureInfoProps}
+   */
+  getProperties({ feature }, layer) {
+    return {
+      featureId: feature.getId(),
+      layerName: layer.name,
+      layerProperties: layer.properties,
+      attributes: this.getAttributes(feature),
+    };
+  }
+
+  /**
+   * This method is being called by featureInfo, whenever a new window is created (added to the windowManager).
+   * May be overwritten by classes extending AbstractFeatureInfoView.
+   * @param {FeatureInfoEvent} featureInfo
+   * @param {import("@vcmap/core").Layer} layer
+   * @returns {WindowComponentOptions}
+   */
+  getWindowComponentOptions(featureInfo, layer) {
+    return {
+      state: this.window.state ?? {
+        headerTitle: layer.properties?.title || layer.name,
+        headerIcon: '$vcsInfo',
+      },
+      slot: this.window.slot ?? WindowSlot.DYNAMIC_LEFT,
+      component: this.component,
+      position: this.window.position,
+      props: this.getProperties(featureInfo, layer),
+    };
+  }
+
+  /**
+   * @returns {FeatureInfoViewOptions}
+   */
+  toJSON() {
+    const config = super.toJSON();
+    if (this.attributeKeys.length > 0) {
+      config.attributeKeys = this.attributeKeys.slice(0);
+    }
+    if (this.keyMapping) {
+      config.keyMapping = { ...this.keyMapping };
+    }
+    if (this.valueMapping) {
+      config.valueMapping = JSON.parse(JSON.stringify(this.valueMapping));
+    }
+    if (Object.keys(this._window).length > 0) {
+      config.window = { ...this._window };
+    }
+    return config;
+  }
+}
+
+export default AbstractFeatureInfoView;

package/src/featureInfo/addressBalloonFeatureInfoView.js

@@ -0,0 +1,118 @@
+import BalloonFeatureInfoView, { extractNestedKey } from './balloonFeatureInfoView.js';
+import AddressBalloonComponent from './AddressBalloonComponent.vue';
+
+/**
+ * @typedef {FeatureInfoViewOptions} AddressBalloonFeatureInfoViewOptions
+ * @property {string|null} [addressName='gml:name'] key to evaluate for name. Use null to suppress
+ * @property {string|null} [street='Address.Street'] key to evaluate for street. Use null to suppress
+ * @property {string|null} [number='Address.HouseNumber'] key to evaluate for house number. Use null to suppress
+ * @property {string|null} [city='Address.City'] key to evaluate for city. Use null to suppress
+ * @property {string|null} [zip='Address.ZipCode'] key to evaluate for zip code. Use null to suppress
+ * @property {string|null} [country='Address.Country'] key to evaluate for country. Use null to suppress
+ */
+
+/**
+ * @class
+ * @description An balloon view.
+ * @extends {BalloonFeatureInfoView}
+ */
+class AddressBalloonFeatureInfoView extends BalloonFeatureInfoView {
+  /**
+   * @type {string}
+   */
+  static get className() { return 'AddressBalloonFeatureInfoView'; }
+
+  /** @returns {AddressBalloonFeatureInfoViewOptions} */
+  static getDefaultOptions() {
+    return {
+      addressName: 'gml:name',
+      street: 'Address.Street',
+      number: 'Address.HouseNumber',
+      city: 'Address.City',
+      zip: 'Address.ZipCode',
+      country: 'Address.Country',
+    };
+  }
+
+  /**
+   * @param {AddressBalloonFeatureInfoViewOptions} options
+   */
+  constructor(options) {
+    super(options, AddressBalloonComponent);
+    const defaultOptions = AddressBalloonFeatureInfoView.getDefaultOptions();
+
+    /**
+     * @type {string|null}
+     */
+    this.addressName = options.addressName !== undefined ? options.addressName : defaultOptions.addressName;
+    /**
+     * @type {string|null}
+     */
+    this.street = options.street !== undefined ? options.street : defaultOptions.street;
+    /**
+     * @type {string|null}
+     */
+    this.number = options.number !== undefined ? options.number : defaultOptions.number;
+    /**
+     * @type {string|null}
+     */
+    this.city = options.city !== undefined ? options.city : defaultOptions.city;
+    /**
+     * @type {string|null}
+     */
+    this.zip = options.zip !== undefined ? options.zip : defaultOptions.zip;
+    /**
+     * @type {string|null}
+     */
+    this.country = options.country !== undefined ? options.country : defaultOptions.country;
+  }
+
+  /**
+   * derives address attributes from addressKeys
+   * @param {undefined|import("ol").Feature<import("ol/geom/Geometry").default>|import("@vcmap/cesium").Cesium3DTileFeature|import("@vcmap/cesium").Cesium3DTilePointFeature} feature
+   * @returns {Object}
+   */
+  getAttributes(feature) {
+    const attributes = super.getAttributes(feature);
+    const obj = {};
+    const applyAddressKeys = (key) => {
+      if (this[key]) {
+        const derivedValue = extractNestedKey(this[key], attributes);
+        if (derivedValue) {
+          obj[key] = derivedValue;
+        }
+      }
+    };
+    Object.keys(AddressBalloonFeatureInfoView.getDefaultOptions()).forEach(key => applyAddressKeys(key));
+    return obj;
+  }
+
+  /**
+   * @returns {AddressBalloonFeatureInfoViewOptions}
+   */
+  toJSON() {
+    const config = super.toJSON();
+    const defaultOptions = AddressBalloonFeatureInfoView.getDefaultOptions();
+    if (this.addressName !== defaultOptions.addressName) {
+      config.addressName = this.addressName;
+    }
+    if (this.street !== defaultOptions.street) {
+      config.street = this.street;
+    }
+    if (this.number !== defaultOptions.number) {
+      config.number = this.number;
+    }
+    if (this.city !== defaultOptions.city) {
+      config.city = this.city;
+    }
+    if (this.zip !== defaultOptions.zip) {
+      config.zip = this.zip;
+    }
+    if (this.country !== defaultOptions.country) {
+      config.country = this.country;
+    }
+    return config;
+  }
+}
+
+export default AddressBalloonFeatureInfoView;