@vcmap/ui 5.0.0-rc.9 → 5.0.1

package/src/featureInfo/AddressBalloonComponent.vue

@@ -0,0 +1,58 @@
+<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"> $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 {
+    VIcon,
+    VListItem,
+    VListItemAvatar,
+    VListItemContent,
+    VListItemSubtitle,
+    VListItemTitle,
+  } from 'vuetify/lib';
+  import BalloonComponent from './BalloonComponent.vue';
+
+  /**
+   * @description A balloon viewing address information
+   */
+  export default {
+    name: 'AddressBalloonComponent',
+    components: {
+      BalloonComponent,
+      VListItem,
+      VListItemAvatar,
+      VIcon,
+      VListItemContent,
+      VListItemTitle,
+      VListItemSubtitle,
+    },
+  };
+</script>
+
+<style></style>

package/src/featureInfo/BalloonComponent.vue

@@ -0,0 +1,193 @@
+<template>
+  <v-card class="mx-auto elevation-0" max-width="400" v-if="position">
+    <slot name="balloon-header" :attrs="{ ...$props, ...$attrs }">
+      <v-list-item class="px-2 align-center">
+        <v-list-item-avatar tile size="16" class="mr-2">
+          <v-icon color="primary"> $vcsInfo </v-icon>
+        </v-list-item-avatar>
+        <v-list-item-content class="pr-1">
+          <v-list-item-title>
+            <h3 class="font-weight-bold">
+              {{ $t(balloonTitle) }}
+            </h3>
+          </v-list-item-title>
+          <v-list-item-subtitle v-if="balloonSubtitle">
+            {{ $t(balloonSubtitle) }}
+          </v-list-item-subtitle>
+        </v-list-item-content>
+        <VcsButton
+          @click.stop="close"
+          icon="mdi-close-thick"
+          tooltip="components.close"
+          class="d-flex"
+        />
+      </v-list-item>
+    </slot>
+
+    <v-divider />
+
+    <v-card
+      class="overflow-y-auto py-2 elevation-0"
+      max-height="250"
+      color="transparent"
+    >
+      <slot :attrs="{ ...$props, ...$attrs }">
+        <v-list
+          v-for="(value, name, index) in attributes"
+          :key="`attribute-${index}`"
+          color="transparent"
+        >
+          <v-list-item class="px-2">
+            <v-list-item-content>
+              <v-list-item-title>
+                {{ $t(name) }}
+              </v-list-item-title>
+              <v-list-item-subtitle>{{ $t(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 {
+    VCard,
+    VDivider,
+    VIcon,
+    VList,
+    VListItem,
+    VListItemAvatar,
+    VListItemContent,
+    VListItemSubtitle,
+    VListItemTitle,
+  } from 'vuetify/lib';
+  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} balloonTitle - balloon title
+   * @vue-prop {string} balloonSubtitle - 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,
+      VCard,
+      VList,
+      VListItem,
+      VListItemAvatar,
+      VIcon,
+      VListItemContent,
+      VListItemTitle,
+      VListItemSubtitle,
+      VDivider,
+    },
+    props: {
+      featureId: {
+        type: String,
+        required: true,
+      },
+      balloonTitle: {
+        type: String,
+        required: true,
+      },
+      balloonSubtitle: {
+        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 lang="scss">
+  @import '../styles/shades.scss';
+
+  .balloon {
+    z-index: 0 !important;
+  }
+  .balloon hr:first-child {
+    display: none;
+  }
+  .balloon:after {
+    content: '';
+    position: absolute;
+    bottom: -12px;
+    left: 40px;
+    border-width: 12px 10px 0;
+    border-style: solid;
+    display: block;
+    width: 0;
+    filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.3));
+  }
+  .theme--light .balloon:after {
+    border-color: map-get($shades, 'white') transparent;
+  }
+  .theme--dark .balloon:after {
+    border-color: map-get($shades, 'black') transparent;
+  }
+  .balloon .v-list-item .v-list-item__title,
+  .balloon .v-list-item .v-list-item__subtitle {
+    line-height: 18px;
+  }
+</style>

package/src/featureInfo/abstractFeatureInfoView.js

@@ -0,0 +1,346 @@
+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;
+}
+
+/**
+ * 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.
+ * @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 module, 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/engine").Cesium3DTileFeature|import("@vcmap-cesium/engine").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 applyOlcsAttributeFilter(attributes, this.attributeKeys);
+  }
+
+  /**
+   * 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 {VcsUiApp} app
+   * @param {FeatureInfoEvent} featureInfo
+   * @param {import("@vcmap/core").Layer} layer
+   * @returns {WindowComponentOptions}
+   */
+  getWindowComponentOptions(app, featureInfo, layer) {
+    return {
+      state: this.window.state ?? {
+        headerTitle: layer.properties?.title || layer.name,
+        headerIcon: '$vcsInfo',
+        infoUrl: app.getHelpUrlCallback('/tools/infoTool.html'),
+      },
+      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;