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

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;

package/src/featureInfo/balloonFeatureInfoView.js

@@ -0,0 +1,151 @@
+import { Feature } from 'ol';
+import { getCenter } from 'ol/extent.js';
+import { Cartographic, Entity, Math as CesiumMath } from '@vcmap/cesium';
+import { Projection } from '@vcmap/core';
+import { check } from '@vcsuite/check';
+import AbstractFeatureInfoView from './abstractFeatureInfoView.js';
+import { getWindowPositionOptions, WindowAlignment, WindowSlot } from '../manager/window/windowManager.js';
+import BalloonComponent from './BalloonComponent.vue';
+import { balloonOffset } from './balloonHelper.js';
+
+/**
+ * derive value from attributes
+ * @param {string} key - key or nested key
+ * @param {Object} attrs
+ * @param {string|null} [defaultValue]
+ * @returns {string|null}
+ */
+export function extractNestedKey(key, attrs, defaultValue = null) {
+  check(key, String);
+  check(attrs, Object);
+
+  const keys = key.split('.');
+  const derivedValue = keys.reduce((obj, prop) => (obj[prop] || {}), attrs);
+  return typeof derivedValue === 'string' ? derivedValue : defaultValue;
+}
+
+/**
+ * @typedef {FeatureInfoViewOptions} BalloonFeatureInfoViewOptions
+ * @property {string} [title] - optional title to overwrite default (layerName). Can be attribute key (nested key using '.'), i18n key or text
+ * @property {string} [subtitle] - optional window title to overwrite default (featureId). Can be attribute key (nested key using '.'), i18n key or text
+ */
+
+/**
+ * @typedef {FeatureInfoProps} BalloonFeatureInfoViewProps
+ * @property {string} title
+ * @property {string} subtitle
+ * @property {import("ol/coordinate").Coordinate} position
+ */
+
+/**
+ * @param {import("@vcmap/core").Cartesian3} cartesian
+ * @returns {import("ol/coordinate").Coordinate}
+ */
+function cartesian3ToCoordinate(cartesian) {
+  const cartographic = Cartographic.fromCartesian(cartesian);
+  const wgs84position = [
+    CesiumMath.toDegrees(cartographic.longitude),
+    CesiumMath.toDegrees(cartographic.latitude),
+    cartographic.height,
+  ];
+  return Projection.wgs84ToMercator(wgs84position);
+}
+
+/**
+ * @param {FeatureType} feature
+ * @returns {import("ol/coordinate").Coordinate|null}
+ */
+function getPositionFromFeature(feature) {
+  if (feature instanceof Feature && feature.getGeometry()) {
+    return getCenter(feature.getGeometry().getExtent());
+  } else if (feature instanceof Entity) {
+    return cartesian3ToCoordinate(feature.position);
+  } else if (feature?.primitive?.boundingSphere?.center) {
+    return cartesian3ToCoordinate(feature.primitive.boundingSphere.center);
+  }
+  return null;
+}
+
+/**
+ * @class
+ * @description An balloon view.
+ * @extends {AbstractFeatureInfoView}
+ */
+class BalloonFeatureInfoView extends AbstractFeatureInfoView {
+  /**
+   * @type {string}
+   */
+  static get className() { return 'BalloonFeatureInfoView'; }
+
+  /**
+   * @param {BalloonFeatureInfoViewOptions} options
+   * @param {import("vue").Component} [component=BalloonComponent]
+   */
+  constructor(options, component) {
+    super(options, component || BalloonComponent);
+
+    /**
+     * @type {string}
+     */
+    this.title = options.title;
+
+    /**
+     * @type {string}
+     */
+    this.subtitle = options.subtitle;
+  }
+
+  /**
+   * @param {FeatureInfoEvent} featureInfo
+   * @param {import("@vcmap/core").Layer} layer
+   * @returns {BalloonFeatureInfoViewProps}
+   */
+  getProperties(featureInfo, layer) {
+    const properties = super.getProperties(featureInfo, layer);
+    return {
+      ...properties,
+      position: featureInfo.position ?? getPositionFromFeature(featureInfo.feature),
+      title: this.title ?
+        extractNestedKey(this.title, properties.attributes, this.title) :
+        properties.layerProperties.title,
+      subtitle: this.subtitle ?
+        extractNestedKey(this.subtitle, properties.attributes, this.subtitle) :
+        properties.featureId,
+    };
+  }
+
+  /**
+   * @param {FeatureInfoEvent} featureInfo
+   * @param {import("@vcmap/core").Layer} layer
+   * @returns {WindowComponentOptions}
+   */
+  getWindowComponentOptions(featureInfo, layer) {
+    const options = super.getWindowComponentOptions(featureInfo, layer);
+    options.state.hideHeader = true;
+    options.state.classes = ['balloon'];
+    options.slot = WindowSlot.DETACHED;
+    options.position = getWindowPositionOptions(
+      (featureInfo.windowPosition?.[0] ?? 0) - balloonOffset.x, // if we do not have a windowPosition, let the next render handle it
+      (featureInfo.windowPosition?.[1] ?? 0) - balloonOffset.y,
+      null,
+      WindowAlignment.BOTTOM_LEFT,
+    );
+    return options;
+  }
+
+  /**
+   * @returns {BalloonFeatureInfoViewOptions}
+   */
+  toJSON() {
+    const config = super.toJSON();
+    if (this.title) {
+      config.title = this.title;
+    }
+    if (this.subtitle) {
+      config.subtitle = this.subtitle;
+    }
+    return config;
+  }
+}
+
+export default BalloonFeatureInfoView;