@vcmap/ui 6.1.0-rc.6 → 6.1.0

package/src/featureInfo/ClusterFeatureComponent.vue

@@ -1,5 +1,6 @@
 <script setup>
-  import { ref, shallowRef, inject, onUnmounted } from 'vue';
+  import { ref, shallowRef, inject, onUnmounted, watch } from 'vue';
+  import { LayerState } from '@vcmap/core';
   import VcsGroupedList from '../components/lists/VcsGroupedList.vue';
 
   const props = defineProps({
@@ -15,25 +16,60 @@
     },
   });
 
+  const emit = defineEmits(['close']);
+
   const app = inject('vcsApp');
   const open = ref(true);
   const selected = shallowRef([]);
 
-  const selectionListener = app.featureInfo.featureChanged.addEventListener(
-    (f) => {
-      if (f === null) {
-        selected.value = [];
-      } else {
-        const item = props.items.find((i) => i.name === f.getId());
-        if (item) {
-          selected.value = [item];
-        }
+  const selectCurrentFeature = (f) => {
+    if (f == null) {
+      selected.value = [];
+    } else {
+      const item = props.items.find((i) => i.name === f.getId());
+      if (item) {
+        selected.value = [item];
       }
+    }
+  };
+  selectCurrentFeature(app.featureInfo.selectedFeature);
+
+  const selectionListener =
+    app.featureInfo.featureChanged.addEventListener(selectCurrentFeature);
+
+  const items = ref(props.items);
+  const groups = ref(props.groups);
+
+  watch(
+    () => props.items,
+    (newItems) => {
+      items.value = newItems;
+      selectCurrentFeature(app.featureInfo.selectedFeature);
     },
   );
+  watch(
+    () => props.groups,
+    (newGroups) => {
+      groups.value = newGroups;
+    },
+  );
+
+  const layerListener = app.layers.stateChanged.addEventListener((layer) => {
+    if (
+      layer.state === LayerState.INACTIVE &&
+      items.value.some((item) => item.group === layer.name)
+    ) {
+      items.value = items.value.filter((item) => item.group !== layer.name);
+      groups.value = groups.value.filter((group) => group.name !== layer.name);
+      if (items.value.length === 0) {
+        emit('close');
+      }
+    }
+  });
 
   onUnmounted(() => {
     selectionListener();
+    layerListener();
   });
 </script>
 
@@ -51,7 +87,7 @@
         open-all
       />
     </template>
-    <p v-else>{{ $t('featureInfo.cluster.empty') }}</p>
+    <p v-else class="ma-2">{{ $t('featureInfo.cluster.empty') }}</p>
   </div>
 </template>
 

package/src/featureInfo/ClusterFeatureComponent.vue.d.ts

@@ -1,4 +1,5 @@
 declare const _default: import("vue").DefineComponent<{}, {
+    $emit: (event: "close", ...args: any[]) => void;
     $props: {
         readonly [x: string]: any;
     };

package/src/featureInfo/MarkdownBalloonComponent.vue

@@ -1,25 +1,19 @@
 <template>
   <BalloonComponent v-bind="{ ...$attrs }" class="markdown-balloon-component">
-    <VcsMarkdown :content="content" />
+    <vcs-template-markdown v-bind="{ ...$attrs }" />
   </BalloonComponent>
 </template>
 <script>
   import BalloonComponent from './BalloonComponent.vue';
-  import VcsMarkdown from '../components/form-output/VcsMarkdown.vue';
+  import VcsTemplateMarkdown from '../components/form-output/VcsTemplateMarkdown.vue';
 
   /**
    * @description A balloon showing markdown content
    */
   export default {
     name: 'MarkdownBalloonComponent',
-    props: {
-      content: {
-        type: String,
-        required: true,
-      },
-    },
     components: {
-      VcsMarkdown,
+      VcsTemplateMarkdown,
       BalloonComponent,
     },
   };

package/src/featureInfo/MarkdownBalloonComponent.vue.d.ts

@@ -1,12 +1,2 @@
-declare const _default: import("vue").DefineComponent<{
-    content: {
-        type: StringConstructor;
-        required: true;
-    };
-}, any, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    content: {
-        type: StringConstructor;
-        required: true;
-    };
-}>>, {}, {}>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

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) {
@@ -75,7 +75,7 @@ export async function getBalloonPosition(app, position) {
  * @param {HTMLElement} target - the map's target { @link @import("@vcmap/core").MapCollection }
  */
 export function setBalloonPosition(windowManager, id, windowPosition, target) {
-  if (!windowPosition) {
+  if (!windowPosition || !windowManager.has(id)) {
     return;
   }
 
@@ -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