@vcmap/ui 6.1.0-rc.7 → 6.1.1

package/src/featureInfo/balloonFeatureInfoView.d.ts

@@ -15,6 +15,8 @@ export type BalloonFeatureInfoViewProps = import("./abstractFeatureInfoView.js")
     balloonTitle: string;
     balloonSubtitle: string;
     position: import("ol/coordinate.js").Coordinate;
+    heightReference: HeightReference;
+    heightOffset: number;
 };
 /**
  * @class
@@ -46,4 +48,5 @@ declare class BalloonFeatureInfoView extends AbstractFeatureInfoView {
      */
     toJSON(): BalloonFeatureInfoViewOptions;
 }
+import { HeightReference } from '@vcmap-cesium/engine';
 import AbstractFeatureInfoView from './abstractFeatureInfoView.js';

package/src/featureInfo/balloonFeatureInfoView.js

@@ -1,7 +1,19 @@
 import { Feature } from 'ol';
 import { getCenter } from 'ol/extent.js';
-import { Cartographic, Entity, Math as CesiumMath } from '@vcmap-cesium/engine';
-import { Projection } from '@vcmap/core';
+import Point from 'ol/geom/Point.js';
+import {
+  Cartographic,
+  Entity,
+  HeightReference,
+  Math as CesiumMath,
+} from '@vcmap-cesium/engine';
+import {
+  getGeometryHeight,
+  getHeightInfo,
+  isAbsoluteHeightReference,
+  isRelativeHeightReference,
+  Projection,
+} from '@vcmap/core';
 import { check } from '@vcsuite/check';
 import AbstractFeatureInfoView from './abstractFeatureInfoView.js';
 import { WindowSlot } from '../manager/window/windowManager.js';
@@ -34,6 +46,8 @@ export function extractNestedKey(key, attrs, defaultValue = null) {
  *   balloonTitle: string,
  *   balloonSubtitle: string,
  *   position: import("ol/coordinate.js").Coordinate
+ *   heightReference: HeightReference,
+ *   heightOffset: number
  * }} BalloonFeatureInfoViewProps
  */
 
@@ -53,17 +67,64 @@ function cartesian3ToCoordinate(cartesian) {
 
 /**
  * @param {FeatureType} feature
- * @returns {import("ol/coordinate.js").Coordinate|null}
+ * @param {import("@vcmap/core").Layer} layer
+ * @param {import("ol/coordinate.js").Coordinate|undefinded} clickedPosition
+ * @returns {{position?: import("ol/coordinate.js").Coordinate, heightReference: HeightReference, heightOffset: number}}
  */
-function getPositionFromFeature(feature) {
-  if (feature instanceof Feature && feature.getGeometry()) {
-    return getCenter(feature.getGeometry().getExtent());
+function getPositionFromFeature(feature, layer, clickedPosition) {
+  let heightReference = HeightReference.NONE;
+  let heightOffset = 0;
+  let position = null;
+  if (feature instanceof Feature && feature.getGeometry() instanceof Point) {
+    const point = feature.getGeometry();
+    const renderAs = layer.vectorProperties.renderAs(feature);
+    if (renderAs === 'geometry') {
+      // special case where we do not want to use the clickedPosition but the exact Position of the Point
+      const heightInfo = getHeightInfo(feature, point, layer.vectorProperties);
+      ({ heightReference } = heightInfo);
+      let height = clickedPosition?.[2] ?? 0;
+      position = point.getCoordinates();
+      // if clamped, do nothing
+      if (isRelativeHeightReference(heightReference)) {
+        height = getGeometryHeight(point, heightInfo);
+        if (heightInfo.groundLevel != null) {
+          // we have a groundLevel, so no need to clamp the point
+          heightReference = HeightReference.NONE;
+        }
+        if (heightInfo.heightAboveGround != null) {
+          heightOffset += heightInfo.heightAboveGround;
+        }
+        const extrudedHeight = heightInfo.storeyHeightsAboveGround.reduce(
+          (acc, storeyHeight) => acc + storeyHeight,
+          0,
+        );
+        heightOffset += extrudedHeight;
+        height += extrudedHeight;
+        position = [position[0], position[1], height];
+      } else if (isAbsoluteHeightReference(heightReference)) {
+        const extrudedHeight = heightInfo.storeyHeightsAboveGround.reduce(
+          (acc, storeyHeight) => acc + storeyHeight,
+          0,
+        );
+        position = [
+          position[0],
+          position[1],
+          heightInfo.groundLevelOrMinHeight + extrudedHeight,
+        ];
+      }
+      return { position, heightOffset, heightReference };
+    }
+  }
+  if (clickedPosition) {
+    position = clickedPosition.slice();
+  } else if (feature instanceof Feature && feature.getGeometry()) {
+    position = getCenter(feature.getGeometry().getExtent());
   } else if (feature instanceof Entity) {
-    return cartesian3ToCoordinate(feature.position);
+    position = cartesian3ToCoordinate(feature.position);
   } else if (feature?.primitive?.boundingSphere?.center) {
-    return cartesian3ToCoordinate(feature.primitive.boundingSphere.center);
+    position = cartesian3ToCoordinate(feature.primitive.boundingSphere.center);
   }
-  return null;
+  return { position, heightReference, heightOffset };
 }
 
 /**
@@ -104,10 +165,16 @@ class BalloonFeatureInfoView extends AbstractFeatureInfoView {
    */
   getProperties(featureInfo, layer) {
     const properties = super.getProperties(featureInfo, layer);
+    const { position, heightReference, heightOffset } = getPositionFromFeature(
+      featureInfo.feature,
+      layer,
+      featureInfo.position,
+    );
     return {
       ...properties,
-      position:
-        featureInfo.position ?? getPositionFromFeature(featureInfo.feature),
+      position,
+      heightReference,
+      heightOffset,
       balloonTitle:
         this.balloonTitle != null
           ? extractNestedKey(

package/src/featureInfo/balloonHelper.js

@@ -24,10 +24,14 @@ export const balloonOffset = { x: 55, y: 25 };
 
 /**
  * @param {import("@vcmap-cesium/engine").Scene} scene
- * @param {import("@vcmap-cesium/engine").Cartesian3} cartesian
+ * @param {import("ol/coordinate.js").Coordinate} position
  * @returns {undefined|import("@vcmap-cesium/engine").Cartesian2}
  */
-function getBalloonPositionCesium(scene, cartesian) {
+function getBalloonPositionCesium(scene, position) {
+  const wgs84Position = Projection.mercatorToWgs84(position);
+  const cartesian = Cartographic.toCartesian(
+    Cartographic.fromDegrees(...wgs84Position),
+  );
   return SceneTransforms.worldToWindowCoordinates(scene, cartesian);
 }
 
@@ -53,11 +57,7 @@ function getBalloonPositionOL(olMap, position) {
 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),
-    );
-    return getBalloonPositionCesium(map.getScene(), cartesian);
+    return getBalloonPositionCesium(map.getScene(), position);
   } else if (map instanceof OpenlayersMap) {
     return getBalloonPositionOL(map.olMap, position);
   } else if (map instanceof ObliqueMap) {
@@ -130,16 +130,12 @@ export async function setupBalloonPositionListener(
         const [position3D] = await map.getHeightFromTerrain([position]);
         position[2] = position3D[2];
       }
-      const wgs84Position = Projection.mercatorToWgs84(position);
-      const cartesian = Cartographic.toCartesian(
-        Cartographic.fromDegrees(...wgs84Position),
-      );
       listeners.push(
         map.getScene().postRender.addEventListener((scene) => {
           setBalloonPosition(
             app.windowManager,
             windowId,
-            getBalloonPositionCesium(scene, cartesian),
+            getBalloonPositionCesium(scene, position),
             app.maps.target,
           );
         }),

package/src/featureInfo/featureInfo.d.ts

@@ -20,6 +20,26 @@ export function getHighlightStyle(feature: FeatureType, layer: import("@vcmap/co
  * @returns {import("ol/style/Style.js").default}
  */
 export function getClusterHighlightStyle(clusterFeature: import("ol").Feature, clusterGroup: import("@vcmap/core").VectorClusterGroup, clusterStyle: import("ol/style/Style.js").default, defaultFillColor: string): import("ol/style/Style.js").default;
+/**
+ * @param {import("../vcsUiApp.js").default} app
+ * @param {import("ol").Feature} feature
+ * @returns {import("./abstractFeatureInfoView.js").default|null}
+ */
+export function getFeatureInfoViewForFeature(app: import("../vcsUiApp.js").default, feature: import("ol").Feature): import("./abstractFeatureInfoView.js").default | null;
+/**
+ * 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: import("../vcsUiApp.js").default, features: import("@vcmap/core").EventFeature[], position?: import("ol/coordinate.js").Coordinate | null): {
+    groups: import("../components/lists/VcsGroupedList.vue").VcsListGroup;
+    items: import("../components/lists/VcsGroupedList.vue").VcsGroupedListItem;
+};
 /**
  * @param {import("../vcsUiApp.js").default} app
  * @returns {FeatureInfoSession}
@@ -89,7 +109,7 @@ declare class FeatureInfo extends Collection<AbstractFeatureInfoView> {
      */
     private _clusterWindowId;
     /**
-     * @type {VcsEvent<FeatureType|null>}
+     * @type {import("@vcmap/core").VcsEvent<FeatureType|null>}
      * @private
      */
     private _featureChanged;
@@ -118,6 +138,11 @@ declare class FeatureInfo extends Collection<AbstractFeatureInfoView> {
      * @private
      */
     private _selectedClusterFeatureId;
+    /**
+     * @type {Array<function():void>}
+     * @private
+     */
+    private _destroyBalloonClampedListener;
     /**
      * @type {Array<function():void>}
      * @private
@@ -126,14 +151,14 @@ declare class FeatureInfo extends Collection<AbstractFeatureInfoView> {
     _destroyFeatureInfoTool: () => void;
     /**
      * A vector layer to render provided features on
-     * @type {VectorLayer|null}
+     * @type {import("@vcmap/core").VectorLayer|null}
      * @private
      */
     private _scratchLayer;
     /**
      * 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(): VcsEvent<FeatureType | null>;
     /**
@@ -146,7 +171,7 @@ declare class FeatureInfo extends Collection<AbstractFeatureInfoView> {
     get selectedFeatureId(): string | null;
     /**
      * 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(): VcsEvent<Feature<import("ol/geom.js").Geometry> | null>;
     /**
@@ -173,7 +198,7 @@ declare class FeatureInfo extends Collection<AbstractFeatureInfoView> {
     private _ensureScratchLayer;
     /**
      * @param {FeatureType} feature
-     * @returns {null|AbstractFeatureInfoView}
+     * @returns {null|import("./abstractFeatureInfoView.js").default}
      * @private
      */
     private _getFeatureInfoViewForFeature;
@@ -187,10 +212,10 @@ declare class FeatureInfo extends Collection<AbstractFeatureInfoView> {
      * @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>}
      */
-    selectFeature(feature: FeatureType, position?: import("ol/coordinate.js").Coordinate | undefined, windowPosition?: import("ol/coordinate.js").Coordinate | undefined, featureInfoView?: AbstractFeatureInfoView | undefined): Promise<void>;
+    selectFeature(feature: FeatureType, position?: import("ol/coordinate.js").Coordinate | undefined, windowPosition?: import("ol/coordinate.js").Coordinate | undefined, featureInfoView?: import("./abstractFeatureInfoView.js").default | undefined): Promise<void>;
     /**
      * Selecting a cluster feature opens a window listing the features belonging to the cluster feature.
      * To be listed the feature must meet the following criteria: a) the feature must be part of a layer, b) said layer must be managed in