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

package/src/featureInfo/AddressBalloonComponent.vue

@@ -1,16 +1,9 @@
 <template>
-  <BalloonComponent
-    v-bind="{...$attrs}"
-  >
+  <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 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">
@@ -22,15 +15,19 @@
           <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-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,
@@ -58,6 +55,4 @@
   };
 </script>
 
-<style>
-
-</style>
+<style></style>

package/src/featureInfo/BalloonComponent.vue

@@ -1,19 +1,9 @@
 <template>
-  <v-card
-    class="mx-auto elevation-0"
-    max-width="400"
-    v-if="position"
-  >
-    <slot name="balloon-header" :attrs="{...$props, ...$attrs}">
+  <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 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>
@@ -27,7 +17,6 @@
         </v-list-item-content>
         <VcsButton
           @click.stop="close"
-          small
           icon="mdi-close-thick"
           tooltip="components.close"
           class="d-flex"
@@ -37,9 +26,17 @@
 
     <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-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>
@@ -54,10 +51,10 @@
   </v-card>
 </template>
 <script>
-
   import { inject, onMounted, onUnmounted, watch } from 'vue';
   import {
-    VCard, VDivider,
+    VCard,
+    VDivider,
     VIcon,
     VList,
     VListItem,
@@ -128,13 +125,24 @@
       };
 
       onMounted(async () => {
-        balloonPositionListener = await setupBalloonPositionListener(app, windowId, props.position);
+        balloonPositionListener = await setupBalloonPositionListener(
+          app,
+          windowId,
+          props.position,
+        );
       });
 
-      watch(() => props.featureId, async () => {
-        destroyListener();
-        balloonPositionListener = await setupBalloonPositionListener(app, windowId, props.position);
-      });
+      watch(
+        () => props.featureId,
+        async () => {
+          destroyListener();
+          balloonPositionListener = await setupBalloonPositionListener(
+            app,
+            windowId,
+            props.position,
+          );
+        },
+      );
 
       onUnmounted(() => {
         destroyListener();
@@ -153,7 +161,7 @@
 </script>
 
 <style lang="scss">
-@import '../styles/shades.scss';
+  @import '../styles/shades.scss';
 
   .balloon {
     z-index: 0 !important;
@@ -162,7 +170,7 @@
     display: none;
   }
   .balloon:after {
-    content: "";
+    content: '';
     position: absolute;
     bottom: -12px;
     left: 40px;

package/src/featureInfo/abstractFeatureInfoView.js

@@ -49,11 +49,18 @@ export function applyValueMapping(attributes, mapping) {
     })
     .forEach((mappingKey) => {
       if (Object.hasOwn(attributes, mappingKey)) {
-        attributes[mappingKey] = getMappedValue(mapping[mappingKey], 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) {
+          if (
+            obj &&
+            Object.hasOwn(obj, key) &&
+            index === mappingKeys.length - 1
+          ) {
             obj[key] = getMappedValue(mapping[mappingKey], obj[key]);
           }
           return obj?.[key];
@@ -109,7 +116,11 @@ export function applyKeyMapping(attributes, mapping) {
       } else {
         const mappingKeys = mappingKey.split('.');
         mappingKeys.reduce((obj, key, index) => {
-          if (obj && Object.hasOwn(obj, key) && index === mappingKeys.length - 1) {
+          if (
+            obj &&
+            Object.hasOwn(obj, key) &&
+            index === mappingKeys.length - 1
+          ) {
             attributes[mapping[mappingKey]] = obj[key];
             delete obj[key];
           }
@@ -152,16 +163,30 @@ export function applyAttributeFilter(attributes, keys, result = {}) {
     }
   });
 
-  Object.entries(nestedKeys)
-    .forEach(([parent, pKs]) => {
-      if (typeof attributes[parent] === 'object') {
-        result[parent] = {};
-        applyAttributeFilter(attributes[parent], pKs, result[parent]);
-      }
-    });
+  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.
@@ -173,7 +198,9 @@ class AbstractFeatureInfoView extends VcsObject {
   /**
    * @type {string}
    */
-  static get className() { return 'AbstractFeatureInfoView'; }
+  static get className() {
+    return 'AbstractFeatureInfoView';
+  }
 
   /** @returns {FeatureInfoViewOptions} */
   static getDefaultOptions() {
@@ -221,14 +248,18 @@ class AbstractFeatureInfoView extends VcsObject {
    * @type {WindowComponentOptions|Object}
    * @readonly
    */
-  get window() { return this._window; }
+  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; }
+  get component() {
+    return this._component;
+  }
 
   /**
    * This method returns all relevant attributes for this view.
@@ -249,7 +280,7 @@ class AbstractFeatureInfoView extends VcsObject {
     if (this.keyMapping) {
       applyKeyMapping(attributes, this.keyMapping);
     }
-    return attributes;
+    return applyOlcsAttributeFilter(attributes, this.attributeKeys);
   }
 
   /**

package/src/featureInfo/addressBalloonFeatureInfoView.js

@@ -1,4 +1,6 @@
-import BalloonFeatureInfoView, { extractNestedKey } from './balloonFeatureInfoView.js';
+import BalloonFeatureInfoView, {
+  extractNestedKey,
+} from './balloonFeatureInfoView.js';
 import AddressBalloonComponent from './AddressBalloonComponent.vue';
 
 /**
@@ -20,7 +22,9 @@ class AddressBalloonFeatureInfoView extends BalloonFeatureInfoView {
   /**
    * @type {string}
    */
-  static get className() { return 'AddressBalloonFeatureInfoView'; }
+  static get className() {
+    return 'AddressBalloonFeatureInfoView';
+  }
 
   /** @returns {AddressBalloonFeatureInfoViewOptions} */
   static getDefaultOptions() {
@@ -44,15 +48,20 @@ class AddressBalloonFeatureInfoView extends BalloonFeatureInfoView {
     /**
      * @type {string|null}
      */
-    this.addressName = options.addressName !== undefined ? options.addressName : defaultOptions.addressName;
+    this.addressName =
+      options.addressName !== undefined
+        ? options.addressName
+        : defaultOptions.addressName;
     /**
      * @type {string|null}
      */
-    this.street = options.street !== undefined ? options.street : defaultOptions.street;
+    this.street =
+      options.street !== undefined ? options.street : defaultOptions.street;
     /**
      * @type {string|null}
      */
-    this.number = options.number !== undefined ? options.number : defaultOptions.number;
+    this.number =
+      options.number !== undefined ? options.number : defaultOptions.number;
     /**
      * @type {string|null}
      */
@@ -64,7 +73,8 @@ class AddressBalloonFeatureInfoView extends BalloonFeatureInfoView {
     /**
      * @type {string|null}
      */
-    this.country = options.country !== undefined ? options.country : defaultOptions.country;
+    this.country =
+      options.country !== undefined ? options.country : defaultOptions.country;
   }
 
   /**
@@ -83,7 +93,9 @@ class AddressBalloonFeatureInfoView extends BalloonFeatureInfoView {
         }
       }
     };
-    Object.keys(AddressBalloonFeatureInfoView.getDefaultOptions()).forEach(key => applyAddressKeys(key));
+    Object.keys(AddressBalloonFeatureInfoView.getDefaultOptions()).forEach(
+      (key) => applyAddressKeys(key),
+    );
     return obj;
   }
 

package/src/featureInfo/balloonFeatureInfoView.js

@@ -19,7 +19,7 @@ export function extractNestedKey(key, attrs, defaultValue = null) {
   check(attrs, Object);
 
   const keys = key.split('.');
-  const derivedValue = keys.reduce((obj, prop) => (obj[prop] || {}), attrs);
+  const derivedValue = keys.reduce((obj, prop) => obj[prop] || {}, attrs);
   return typeof derivedValue === 'string' ? derivedValue : defaultValue;
 }
 
@@ -74,7 +74,9 @@ class BalloonFeatureInfoView extends AbstractFeatureInfoView {
   /**
    * @type {string}
    */
-  static get className() { return 'BalloonFeatureInfoView'; }
+  static get className() {
+    return 'BalloonFeatureInfoView';
+  }
 
   /**
    * @param {BalloonFeatureInfoViewOptions} options
@@ -103,13 +105,24 @@ class BalloonFeatureInfoView extends AbstractFeatureInfoView {
     const properties = super.getProperties(featureInfo, layer);
     return {
       ...properties,
-      position: featureInfo.position ?? getPositionFromFeature(featureInfo.feature),
-      balloonTitle: this.balloonTitle != null ?
-        extractNestedKey(this.balloonTitle, properties.attributes, this.balloonTitle) :
-        properties.layerProperties.title,
-      balloonSubtitle: this.balloonSubtitle != null ?
-        extractNestedKey(this.balloonSubtitle, properties.attributes, this.balloonSubtitle) :
-        properties.featureId,
+      position:
+        featureInfo.position ?? getPositionFromFeature(featureInfo.feature),
+      balloonTitle:
+        this.balloonTitle != null
+          ? extractNestedKey(
+              this.balloonTitle,
+              properties.attributes,
+              this.balloonTitle,
+            )
+          : properties.layerProperties.title,
+      balloonSubtitle:
+        this.balloonSubtitle != null
+          ? extractNestedKey(
+              this.balloonSubtitle,
+              properties.attributes,
+              this.balloonSubtitle,
+            )
+          : properties.featureId,
     };
   }
 

package/src/featureInfo/balloonHelper.js

@@ -1,5 +1,15 @@
-import { Cartesian2, Cartographic, SceneTransforms } from '@vcmap-cesium/engine';
-import { CesiumMap, ObliqueMap, OpenlayersMap, Projection, transformToImage } from '@vcmap/core';
+import {
+  Cartesian2,
+  Cartographic,
+  SceneTransforms,
+} from '@vcmap-cesium/engine';
+import {
+  CesiumMap,
+  ObliqueMap,
+  OpenlayersMap,
+  Projection,
+  transformToImage,
+} from '@vcmap/core';
 import { unByKey } from 'ol/Observable.js';
 import {
   getWindowPositionOptionsFromMapEvent,
@@ -44,15 +54,14 @@ export async function getBalloonPosition(app, position) {
   const map = app.maps.activeMap;
   if (map instanceof CesiumMap) {
     const wgs84Position = Projection.mercatorToWgs84(position);
-    const cartesian = Cartographic.toCartesian(Cartographic.fromDegrees(...wgs84Position));
+    const cartesian = Cartographic.toCartesian(
+      Cartographic.fromDegrees(...wgs84Position),
+    );
     return getBalloonPositionCesium(map.getScene(), cartesian);
   } else if (map instanceof OpenlayersMap) {
     return getBalloonPositionOL(map.olMap, position);
   } else if (map instanceof ObliqueMap) {
-    const { coords } = await transformToImage(
-      map.currentImage,
-      position,
-    );
+    const { coords } = await transformToImage(map.currentImage, position);
     return getBalloonPositionOL(map.olMap, coords);
   }
   return undefined;
@@ -72,7 +81,10 @@ export function setBalloonPosition(windowManager, id, windowPosition, target) {
   windowManager.setWindowPositionOptions(
     id,
     getWindowPositionOptionsFromMapEvent(
-      new Cartesian2(windowPosition.x - balloonOffset.x, windowPosition.y - balloonOffset.y),
+      new Cartesian2(
+        windowPosition.x - balloonOffset.x,
+        windowPosition.y - balloonOffset.y,
+      ),
       target,
       WindowAlignment.BOTTOM_LEFT,
     ),
@@ -85,19 +97,25 @@ export function setBalloonPosition(windowManager, id, windowPosition, target) {
  * @param {import("ol/coordinate").Coordinate} clickedPosition - position in mercator
  * @returns {Promise<(() => void)>}
  */
-export async function setupBalloonPositionListener(vcsApp, windowId, clickedPosition) {
+export async function setupBalloonPositionListener(
+  vcsApp,
+  windowId,
+  clickedPosition,
+) {
   const listeners = [];
 
   const destroy = () => {
-    listeners.forEach(cb => cb());
+    listeners.forEach((cb) => cb());
   };
 
   const setup = async (app, id, position) => {
     destroy();
 
-    listeners.push(app.maps.mapActivated.addEventListener(
-      setup.bind(null, app, id, position),
-    ));
+    listeners.push(
+      app.maps.mapActivated.addEventListener(
+        setup.bind(null, app, id, position),
+      ),
+    );
 
     const map = app.maps.activeMap;
     if (map instanceof CesiumMap) {
@@ -106,43 +124,44 @@ export async function setupBalloonPositionListener(vcsApp, windowId, clickedPosi
         position[2] = position3D[2];
       }
       const wgs84Position = Projection.mercatorToWgs84(position);
-      const cartesian = Cartographic.toCartesian(Cartographic.fromDegrees(...wgs84Position));
-      listeners.push(map.getScene().postRender.addEventListener((scene) => {
+      const cartesian = Cartographic.toCartesian(
+        Cartographic.fromDegrees(...wgs84Position),
+      );
+      listeners.push(
+        map.getScene().postRender.addEventListener((scene) => {
+          setBalloonPosition(
+            app.windowManager,
+            windowId,
+            getBalloonPositionCesium(scene, cartesian),
+            app.maps.target,
+          );
+        }),
+      );
+    } else if (map instanceof OpenlayersMap) {
+      const handler = () =>
         setBalloonPosition(
           app.windowManager,
           windowId,
-          getBalloonPositionCesium(scene, cartesian),
+          getBalloonPositionOL(map.olMap, position),
           app.maps.target,
         );
-      }));
-    } else if (map instanceof OpenlayersMap) {
-      const handler = () => setBalloonPosition(
-        app.windowManager,
-        windowId,
-        getBalloonPositionOL(map.olMap, position),
-        app.maps.target,
-      );
-      const key = map.olMap.on(
-        'postrender',
-        handler,
-      );
+      const key = map.olMap.on('postrender', handler);
       listeners.push(() => unByKey(key));
     } else if (map instanceof ObliqueMap) {
-      const { coords } = await transformToImage(
-        map.currentImage,
-        position,
-      );
-      listeners.push(map.imageChanged.addEventListener(setup.bind(null, app, windowId, position)));
-      const handler = () => setBalloonPosition(
-        app.windowManager,
-        windowId,
-        getBalloonPositionOL(map.olMap, coords),
-        app.maps.target,
-      );
-      const key = map.olMap.on(
-        'postrender',
-        handler,
+      const { coords } = await transformToImage(map.currentImage, position);
+      listeners.push(
+        map.imageChanged.addEventListener(
+          setup.bind(null, app, windowId, position),
+        ),
       );
+      const handler = () =>
+        setBalloonPosition(
+          app.windowManager,
+          windowId,
+          getBalloonPositionOL(map.olMap, coords),
+          app.maps.target,
+        );
+      const key = map.olMap.on('postrender', handler);
       listeners.push(() => unByKey(key));
     }
   };