@vcmap/ui 6.1.0-rc.7 → 6.1.0

package/src/featureInfo/featureInfo.js

@@ -18,13 +18,18 @@ import {
   alreadyTransformedToImage,
   ObliqueMap,
   originalFeatureSymbol,
+  mercatorToCartesian,
+  cartesianToMercator,
+  CesiumMap,
 } from '@vcmap/core';
 import { getLogger as getLoggerByName } from '@vcsuite/logger';
 import {
+  Cartographic,
   Cesium3DTileFeature,
   Cesium3DTilePointFeature,
   Color,
   Entity,
+  HeightReference,
 } from '@vcmap-cesium/engine';
 import { Feature } from 'ol';
 import { check, maybe, oneOf } from '@vcsuite/check';
@@ -44,6 +49,7 @@ import { ToolboxType } from '../manager/toolbox/toolboxManager.js';
 import MarkdownBalloonFeatureInfoView from './markdownBalloonFeatureInfoView.js';
 import IframeWmsFeatureInfoView from './iframeWmsFeatureInfoView.js';
 import ClusterFeatureComponent from './ClusterFeatureComponent.vue';
+import { createZoomToFeatureAction } from '../actions/actionHelper.js';
 
 /** @typedef {import("ol").Feature|import("@vcmap-cesium/engine").Cesium3DTileFeature|import("@vcmap-cesium/engine").Cesium3DTilePointFeature|import("@vcmap-cesium/engine").Entity} FeatureType */
 
@@ -152,6 +158,89 @@ export function getClusterHighlightStyle(
   return getHighlightStyleFromStyle(clusterStyle, fillColor);
 }
 
+/**
+ * @param {import("../vcsUiApp.js").default} app
+ * @param {import("ol").Feature} feature
+ * @returns {import("./abstractFeatureInfoView.js").default|null}
+ */
+export function getFeatureInfoViewForFeature(app, feature) {
+  if (feature[featureInfoViewSymbol]) {
+    return feature[featureInfoViewSymbol];
+  }
+  const layer = app.layers.getByKey(feature[vcsLayerName]);
+  const name = layer?.properties?.featureInfo;
+  if (!name) {
+    getLogger().debug(
+      `No view has been configured for layer '${layer?.name}'.`,
+    );
+    return null;
+  }
+  if (!app.featureInfo.hasKey(name)) {
+    getLogger().warning(`No view with name '${name}' has been registered.`);
+    return null;
+  }
+  return app.featureInfo.getByKey(name);
+}
+
+/**
+ * Returns a VcsGroupedListItem for each provided feature and corresponding groups
+ * @param {import("../vcsUiApp.js").default} app
+ * @param {import("@vcmap/core").EventFeature[]} features
+ * @param {import("ol/coordinate.js").Coordinate?} position
+ * @returns {{
+ *   groups: import("../components/lists/VcsGroupedList.vue").VcsListGroup,
+ *   items: import("../components/lists/VcsGroupedList.vue").VcsGroupedListItem,
+ * }}
+ */
+export function getGroupedFeatureList(app, features, position = undefined) {
+  const groups = {};
+  const items = features.map((f) => {
+    const oFeature = f[originalFeatureSymbol] ?? f;
+    let actions;
+    if (oFeature instanceof Feature) {
+      actions = [
+        createZoomToFeatureAction(
+          { name: 'zoomToFeature', icon: 'mdi-target' },
+          oFeature,
+          app.maps,
+        ),
+      ];
+    }
+    /** @type {import("../components/lists/VcsListItemComponent.vue").VcsListItem} */
+    const listItem = reactive({
+      name: oFeature.getId(),
+      title:
+        oFeature.getAttributes()?.title ||
+        oFeature.getAttributes()?.name ||
+        oFeature.getId(),
+      disabled: !getFeatureInfoViewForFeature(app, oFeature),
+      selectionChanged: (value) => {
+        if (value) {
+          app.featureInfo
+            .selectFeature(oFeature, position)
+            .catch((e) => getLogger().error(e));
+        } else {
+          app.featureInfo.clearFeature();
+        }
+      },
+      actions,
+    });
+    const layerName = oFeature[vcsLayerName];
+    if (layerName) {
+      if (!groups[layerName]) {
+        const title = app.layers.getByKey(layerName)?.properties?.title;
+        groups[layerName] = {
+          name: layerName,
+          title: title || layerName,
+        };
+      }
+      listItem.group = layerName;
+    }
+    return listItem;
+  });
+  return { groups: Object.values(groups), items };
+}
+
 /**
  * @param {import("../vcsUiApp.js").default} app
  * @returns {FeatureInfoSession}
@@ -278,6 +367,52 @@ function setupFeatureInfoTool(app) {
   };
 }
 
+/**
+ * @param {import("../vcsUiApp.js").default} app
+ * @param {import("./balloonFeatureInfoView.js").BalloonFeatureInfoViewProps} props
+ * @returns {() => void}
+ */
+function setupBalloonHeightListener(app, props) {
+  let updateHeightListener = () => {};
+  function setupUpdateHeightListener(map) {
+    updateHeightListener();
+    if (map instanceof CesiumMap) {
+      const cartesian = mercatorToCartesian(props.position);
+      const cartographic = Cartographic.fromCartesian(cartesian);
+      const scene = map.getScene();
+      cartographic.height =
+        scene.getHeight(cartographic, props.heightReference) +
+        props.heightOffset;
+      props.position.splice(
+        0,
+        Infinity,
+        ...cartesianToMercator(Cartographic.toCartesian(cartographic)),
+      );
+
+      updateHeightListener = scene.updateHeight(
+        cartographic,
+        (clampedCartographic) => {
+          const pos = cartesianToMercator(
+            Cartographic.toCartesian(clampedCartographic),
+          );
+          pos[2] += props.heightOffset;
+          props.position.splice(0, Infinity, ...pos);
+        },
+        props.heightReference,
+      );
+    }
+  }
+  setupUpdateHeightListener(app.maps.activeMap);
+  const mapActivatedListener = app.maps.mapActivated.addEventListener((map) => {
+    setupUpdateHeightListener(map);
+  });
+
+  return () => {
+    updateHeightListener();
+    mapActivatedListener();
+  };
+}
+
 /**
  * @typedef {Object} FeatureInfoSession
  * @property {VcsEvent<void>} stopped
@@ -317,7 +452,7 @@ class FeatureInfo extends Collection {
      */
     this._clusterWindowId = null;
     /**
-     * @type {VcsEvent<FeatureType|null>}
+     * @type {import("@vcmap/core").VcsEvent<FeatureType|null>}
      * @private
      */
     this._featureChanged = new VcsEvent();
@@ -346,6 +481,12 @@ class FeatureInfo extends Collection {
      * @private
      */
     this._selectedClusterFeatureId = null;
+
+    /**
+     * @type {Array<function():void>}
+     * @private
+     */
+    this._destroyBalloonClampedListener = () => {};
     /**
      * @type {Array<function():void>}
      * @private
@@ -371,24 +512,6 @@ class FeatureInfo extends Collection {
         ) {
           this._app.windowManager.remove(this._windowId);
         }
-
-        if (
-          this._clusterWindowId &&
-          this._app.windowManager.has(this._clusterWindowId)
-        ) {
-          const { props } = this._app.windowManager.get(this._clusterWindowId);
-          if (props.items.some((item) => item.group === layer.name)) {
-            props.items = props.items.filter(
-              (item) => item.group !== layer.name,
-            );
-            props.groups = props.groups.filter(
-              (group) => group.name !== layer.name,
-            );
-            if (props.items.length === 0) {
-              this._app.windowManager.remove(this._clusterWindowId);
-            }
-          }
-        }
       }),
       this._app.windowManager.removed.addEventListener(({ id }) => {
         if (id === this._windowId) {
@@ -407,7 +530,7 @@ class FeatureInfo extends Collection {
     ];
     /**
      * A vector layer to render provided features on
-     * @type {VectorLayer|null}
+     * @type {import("@vcmap/core").VectorLayer|null}
      * @private
      */
     this._scratchLayer = null;
@@ -421,7 +544,7 @@ class FeatureInfo extends Collection {
   /**
    * Emitted whenever a feature is selected or cleared.
    * Does not reflect cluster feature changes!
-   * @type {VcsEvent<null|FeatureType>}
+   * @type {import("@vcmap/core").VcsEvent<null|FeatureType>}
    */
   get featureChanged() {
     return this._featureChanged;
@@ -443,7 +566,7 @@ class FeatureInfo extends Collection {
 
   /**
    * Emitted whenever a cluster feature is selected or cleared.
-   * @type {VcsEvent<null|import("ol").Feature>}
+   * @type {import("@vcmap/core").VcsEvent<null|import("ol").Feature>}
    */
   get clusterFeatureChanged() {
     return this._clusterFeatureChanged;
@@ -496,23 +619,11 @@ class FeatureInfo extends Collection {
 
   /**
    * @param {FeatureType} feature
-   * @returns {null|AbstractFeatureInfoView}
+   * @returns {null|import("./abstractFeatureInfoView.js").default}
    * @private
    */
   _getFeatureInfoViewForFeature(feature) {
-    const layer = this._app.layers.getByKey(feature[vcsLayerName]);
-    const name = layer?.properties?.featureInfo;
-    if (!name) {
-      getLogger().debug(
-        `No view has been configured for layer '${layer?.name}'.`,
-      );
-      return null;
-    }
-    if (!this.hasKey(name)) {
-      getLogger().warning(`No view with name '${name}' has been registered.`);
-      return null;
-    }
-    return /** @type {AbstractFeatureInfoView} */ this.getByKey(name);
+    return getFeatureInfoViewForFeature(this._app, feature);
   }
 
   /**
@@ -525,7 +636,7 @@ class FeatureInfo extends Collection {
    * @param {FeatureType} feature
    * @param {import("ol/coordinate.js").Coordinate=} [position] - optional clicked position. If not given feature's center point is used to place balloons
    * @param {import("ol/coordinate.js").Coordinate=} [windowPosition] - optional clicked window position. If not given derived from position for balloons
-   * @param {AbstractFeatureInfoView=} featureInfoView
+   * @param {import("./abstractFeatureInfoView.js").default=} featureInfoView
    * @returns {Promise<void>}
    */
   async selectFeature(feature, position, windowPosition, featureInfoView) {
@@ -559,6 +670,7 @@ class FeatureInfo extends Collection {
         // we need to clone the feature to avoid changing vcsLayerNameSymbol on the original feature
         const clonedFeature = feature.clone();
         clonedFeature.setId(feature.getId());
+        clonedFeature.set('olcs_allowPicking', true);
         this._scratchLayer.addFeatures([clonedFeature]);
         const featureId = clonedFeature.getId(); // make sure to grab ID after adding it to the layer
         this._scratchLayer.featureVisibility.highlight({
@@ -573,17 +685,17 @@ class FeatureInfo extends Collection {
           this._scratchLayer.featureVisibility.unHighlight([featureId]);
       } else if (layer.vectorClusterGroup) {
         this._ensureScratchLayer();
-        const clone = feature.clone();
+        const clonedFeature = feature.clone();
         const featureId = feature.getId();
         this._scratchLayer.vectorProperties.setValuesForFeatures(
-          layer.vectorProperties.getValuesForFeatures([clone]),
-          [clone],
+          layer.vectorProperties.getValuesForFeatures([clonedFeature]),
+          [clonedFeature],
         );
-        const eyeOffset = clone.get('olcs_eyeOffset') ?? [0, 0, 0];
+        const eyeOffset = clonedFeature.get('olcs_eyeOffset') ?? [0, 0, 0];
         eyeOffset[2] -= 10;
-        clone.set('olcs_eyeOffset', eyeOffset);
-        clone.setId(featureId);
-        this._scratchLayer.addFeatures([clone]);
+        clonedFeature.set('olcs_eyeOffset', eyeOffset);
+        clonedFeature.setId(featureId);
+        this._scratchLayer.addFeatures([clonedFeature]);
         this._scratchLayer.featureVisibility.highlight({
           [featureId]: getHighlightStyle(
             feature,
@@ -593,7 +705,7 @@ class FeatureInfo extends Collection {
           ),
         });
         this._clearHighlightingCb = () =>
-          this._scratchLayer.featureVisibility.unHighlight([clone]);
+          this._scratchLayer.featureVisibility.unHighlight([clonedFeature]);
       } else if (layer.featureVisibility) {
         const featureId = feature.getId();
         layer.featureVisibility.highlight({
@@ -608,14 +720,31 @@ class FeatureInfo extends Collection {
           layer.featureVisibility.unHighlight([featureId]);
       }
       this._windowId = usedFeatureInfoView.className; // use className for a type based position caching
+      const windowComponentOptions =
+        usedFeatureInfoView.getWindowComponentOptions(
+          this._app,
+          { feature, position, windowPosition },
+          layer,
+        );
+
+      let { props } = windowComponentOptions;
+      // check if Balloon should be Rendered Relative or ClampedTo Ground
+      if (usedFeatureInfoView instanceof BalloonFeatureInfoView) {
+        props = reactive(props);
+        if (
+          windowComponentOptions.props.heightReference !== HeightReference.NONE
+        ) {
+          this._destroyBalloonClampedListener = setupBalloonHeightListener(
+            this._app,
+            props,
+          );
+        }
+      }
       this._app.windowManager.add(
         {
           id: this._windowId,
-          ...usedFeatureInfoView.getWindowComponentOptions(
-            this._app,
-            { feature, position, windowPosition },
-            layer,
-          ),
+          ...windowComponentOptions,
+          props,
         },
         vcsAppSymbol,
       );
@@ -645,8 +774,8 @@ class FeatureInfo extends Collection {
     const id = `cluster-at-${clusterFeature.getGeometry().getCoordinates().join('-')}`;
 
     this._ensureScratchLayer();
-    const feature = clusterFeature.clone();
-    feature.setId(id);
+    const clonedFeature = clusterFeature.clone();
+    clonedFeature.setId(id);
 
     clusterFeature[hidden] = true;
     clusterFeature.changed();
@@ -660,8 +789,8 @@ class FeatureInfo extends Collection {
         clusterFeature[vectorClusterGroupName],
       );
       this._scratchLayer.vectorProperties.setValuesForFeatures(
-        clusterGroup.vectorProperties.getValuesForFeatures([feature]),
-        [feature],
+        clusterGroup.vectorProperties.getValuesForFeatures([clonedFeature]),
+        [clonedFeature],
       );
       const clusterStyle = clusterGroup.styleFunction(clusterFeature, 1);
       const highlightStyle = getClusterHighlightStyle(
@@ -670,50 +799,20 @@ class FeatureInfo extends Collection {
         clusterStyle,
         fillColor,
       );
-      feature.setStyle(highlightStyle);
+      clonedFeature.setStyle(highlightStyle);
     } else if (clusterFeature[isProvidedClusterFeature]) {
-      feature.setStyle(
+      clonedFeature.setStyle(
         fromCesiumColor(Color.fromCssColorString(fillColor)).style,
       );
     }
 
     if (this._app.maps.activeMap instanceof ObliqueMap) {
-      feature.getGeometry()[alreadyTransformedToImage] = true;
+      clonedFeature.getGeometry()[alreadyTransformedToImage] = true;
     }
-    this._scratchLayer.addFeatures([feature]);
+    this._scratchLayer.addFeatures([clonedFeature]);
 
     const features = clusterFeature.get('features');
-    const groups = {};
-    const items = features.map((f) => {
-      const oFeature = f[originalFeatureSymbol] ?? f;
-      const listItem = reactive({
-        name: oFeature.getId(),
-        title:
-          oFeature.getAttributes()?.title ||
-          oFeature.getAttributes()?.name ||
-          oFeature.getId(),
-        disabled: !this._getFeatureInfoViewForFeature(oFeature),
-        selectionChanged: (value) => {
-          if (value) {
-            this.selectFeature(oFeature);
-          } else {
-            this.clearFeature();
-          }
-        },
-      });
-      const layerName = oFeature[vcsLayerName];
-      if (layerName) {
-        if (!groups[layerName]) {
-          const title = this._app.layers.getByKey(layerName)?.properties?.title;
-          groups[layerName] = {
-            name: layerName,
-            title: title || layerName,
-          };
-        }
-        listItem.group = layerName;
-      }
-      return listItem;
-    });
+    const { items, groups } = getGroupedFeatureList(this._app, features);
 
     this._clusterWindowId = id;
     this._app.windowManager.add(
@@ -722,7 +821,7 @@ class FeatureInfo extends Collection {
         component: ClusterFeatureComponent,
         props: reactive({
           items,
-          groups: Object.values(groups),
+          groups,
         }),
         state: {
           headerTitle: 'featureInfo.cluster.headerTitle',
@@ -742,6 +841,7 @@ class FeatureInfo extends Collection {
    * @private
    */
   _clearInternal() {
+    this._destroyBalloonClampedListener();
     if (this._clearHighlightingCb) {
       this._clearHighlightingCb();
       this._clearHighlightingCb = null;

package/src/i18n/de.d.ts

@@ -474,10 +474,16 @@ declare namespace messages {
             let empty_2: string;
             export { empty_2 as empty };
         }
+        namespace deepPicking {
+            let title_18: string;
+            export { title_18 as title };
+            let headerTitle_1: string;
+            export { headerTitle_1 as headerTitle };
+        }
     }
     export namespace legend {
-        let title_18: string;
-        export { title_18 as title };
+        let title_19: string;
+        export { title_19 as title };
         let tooltip_5: string;
         export { tooltip_5 as tooltip };
         let empty_3: string;
@@ -486,8 +492,8 @@ declare namespace messages {
         export let defaultLabelText: string;
     }
     export namespace search_1 {
-        let title_19: string;
-        export { title_19 as title };
+        let title_20: string;
+        export { title_20 as title };
         let tooltip_6: string;
         export { tooltip_6 as tooltip };
         export let select: string;
@@ -499,38 +505,38 @@ declare namespace messages {
     }
     export { search_1 as search };
     export namespace toolbox {
-        let title_20: string;
-        export { title_20 as title };
+        let title_21: string;
+        export { title_21 as title };
         let flight_1: string;
         export { flight_1 as flight };
         export let miscellaneous: string;
     }
     export namespace footer {
-        let title_21: string;
-        export { title_21 as title };
+        let title_22: string;
+        export { title_22 as title };
         export namespace attributions {
-            let title_22: string;
-            export { title_22 as title };
+            let title_23: string;
+            export { title_23 as title };
             let tooltip_7: string;
             export { tooltip_7 as tooltip };
             let empty_4: string;
             export { empty_4 as empty };
         }
         export namespace imprint {
-            let title_23: string;
-            export { title_23 as title };
+            let title_24: string;
+            export { title_24 as title };
             let tooltip_8: string;
             export { tooltip_8 as tooltip };
         }
         export namespace dataProtection {
-            let title_24: string;
-            export { title_24 as title };
+            let title_25: string;
+            export { title_25 as title };
             let tooltip_9: string;
             export { tooltip_9 as tooltip };
         }
         export namespace positionDisplay {
-            let title_25: string;
-            export { title_25 as title };
+            let title_26: string;
+            export { title_26 as title };
             let projection_2: string;
             export { projection_2 as projection };
         }

package/src/i18n/de.js

@@ -333,6 +333,10 @@ const messages = {
       collapse: 'Informationsliste minimieren',
       empty: 'Keine Informationen verfügbar',
     },
+    deepPicking: {
+      title: 'Was ist hier?',
+      headerTitle: 'Verfügbare Informationen',
+    },
   },
   legend: {
     title: 'Legende',

package/src/i18n/en.d.ts

@@ -474,10 +474,16 @@ declare namespace messages {
             let empty_2: string;
             export { empty_2 as empty };
         }
+        namespace deepPicking {
+            let title_18: string;
+            export { title_18 as title };
+            let headerTitle_1: string;
+            export { headerTitle_1 as headerTitle };
+        }
     }
     export namespace legend {
-        let title_18: string;
-        export { title_18 as title };
+        let title_19: string;
+        export { title_19 as title };
         let tooltip_5: string;
         export { tooltip_5 as tooltip };
         let empty_3: string;
@@ -486,8 +492,8 @@ declare namespace messages {
         export let defaultLabelText: string;
     }
     export namespace search_1 {
-        let title_19: string;
-        export { title_19 as title };
+        let title_20: string;
+        export { title_20 as title };
         let tooltip_6: string;
         export { tooltip_6 as tooltip };
         export let select: string;
@@ -499,38 +505,38 @@ declare namespace messages {
     }
     export { search_1 as search };
     export namespace toolbox {
-        let title_20: string;
-        export { title_20 as title };
+        let title_21: string;
+        export { title_21 as title };
         let flight_1: string;
         export { flight_1 as flight };
         export let miscellaneous: string;
     }
     export namespace footer {
-        let title_21: string;
-        export { title_21 as title };
+        let title_22: string;
+        export { title_22 as title };
         export namespace attributions {
-            let title_22: string;
-            export { title_22 as title };
+            let title_23: string;
+            export { title_23 as title };
             let tooltip_7: string;
             export { tooltip_7 as tooltip };
             let empty_4: string;
             export { empty_4 as empty };
         }
         export namespace imprint {
-            let title_23: string;
-            export { title_23 as title };
+            let title_24: string;
+            export { title_24 as title };
             let tooltip_8: string;
             export { tooltip_8 as tooltip };
         }
         export namespace dataProtection {
-            let title_24: string;
-            export { title_24 as title };
+            let title_25: string;
+            export { title_25 as title };
             let tooltip_9: string;
             export { tooltip_9 as tooltip };
         }
         export namespace positionDisplay {
-            let title_25: string;
-            export { title_25 as title };
+            let title_26: string;
+            export { title_26 as title };
             let projection_2: string;
             export { projection_2 as projection };
         }

package/src/i18n/en.js

@@ -333,6 +333,10 @@ const messages = {
       collapse: 'Collapse information list',
       empty: 'No information available',
     },
+    deepPicking: {
+      title: "What's here?",
+      headerTitle: 'Available information',
+    },
   },
   legend: {
     title: 'Legend',

package/src/manager/toolbox/GroupToolboxComponent.vue

@@ -35,6 +35,7 @@
           <div class="d-flex align-center justify-space-between gc-1 w-100">
             <VcsToolButton
               v-for="{ id, action } in orderedButtons"
+              :data-action-name="action.name"
               :key="id"
               :tooltip="action.title"
               :icon="action.icon"

package/src/manager/toolbox/SelectToolboxComponent.vue

@@ -6,6 +6,7 @@
   >
     <VcsToolButton
       :key="group.action.tools[group.action.currentIndex].name"
+      :data-action-name="group.action.tools[group.action.currentIndex].name"
       :tooltip="group.action.tools[group.action.currentIndex].title"
       :icon="group.action.tools[group.action.currentIndex].icon"
       :active="group.action.active"
@@ -55,6 +56,7 @@
           <div class="d-flex align-center justify-space-between gc-1 w-100">
             <VcsToolButton
               v-for="(item, index) in group.action.tools"
+              :data-action-name="item.name"
               :key="`${item.name}-${index}`"
               :tooltip="item.title"
               :icon="item.icon"

package/src/manager/toolbox/ToolboxManagerComponent.vue

@@ -16,6 +16,7 @@
       <div
         class="d-flex align-center justify-space-between w-100"
         v-for="group in orderedGroups"
+        :data-toolbox-id="group.id"
         :key="group.id"
       >
         <ToolboxActionGroup

package/src/manager/window/windowManager.d.ts

@@ -76,7 +76,7 @@ export function isSlotPosition(windowPosition: WindowPosition): boolean;
  *   headerComponent?: import("vue").Component<T, unknown, unknown>,
  *   state : Partial<WindowState>,
  *   position : Partial<WindowPositionOptions>,
- *   slot: WindowSlot,
+ *   slot: import("vue").Ref<WindowSlot>,
  *   props: T,
  *   provides: Record<string, unknown>,
  *   zIndex: import("vue").ComputedGetter<number>
@@ -249,7 +249,7 @@ export type WindowComponent<T extends Object = Object> = {
     headerComponent?: import("vue").Component<T, unknown, unknown>;
     state: Partial<WindowState>;
     position: Partial<WindowPositionOptions>;
-    slot: WindowSlot;
+    slot: import("vue").Ref<WindowSlot>;
     props: T;
     provides: Record<string, unknown>;
     zIndex: import("vue").ComputedGetter<number>;