@vcmap/ui 6.1.0-rc.6 → 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}
@@ -224,6 +313,7 @@ function setupFeatureInfoTool(app) {
           action,
         },
         vcsAppSymbol,
+        { desktop: true, tablet: true, mobile: true },
       );
     }
   }
@@ -277,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
@@ -316,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();
@@ -345,6 +481,12 @@ class FeatureInfo extends Collection {
      * @private
      */
     this._selectedClusterFeatureId = null;
+
+    /**
+     * @type {Array<function():void>}
+     * @private
+     */
+    this._destroyBalloonClampedListener = () => {};
     /**
      * @type {Array<function():void>}
      * @private
@@ -370,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) {
@@ -406,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;
@@ -420,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;
@@ -442,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;
@@ -495,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);
   }
 
   /**
@@ -524,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) {
@@ -558,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({
@@ -572,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,
@@ -592,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({
@@ -607,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,
       );
@@ -644,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();
@@ -659,62 +789,30 @@ class FeatureInfo extends Collection {
         clusterFeature[vectorClusterGroupName],
       );
       this._scratchLayer.vectorProperties.setValuesForFeatures(
-        clusterGroup.vectorProperties.getValuesForFeatures([feature]),
-        [feature],
+        clusterGroup.vectorProperties.getValuesForFeatures([clonedFeature]),
+        [clonedFeature],
       );
-      const clusterStyle = clusterGroup.style.createStyleFunction((layerName) =>
-        this._app.layers.getByKey(layerName),
-      )(clusterFeature, 1);
+      const clusterStyle = clusterGroup.styleFunction(clusterFeature, 1);
       const highlightStyle = getClusterHighlightStyle(
         clusterFeature,
         clusterGroup,
         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(
@@ -723,7 +821,7 @@ class FeatureInfo extends Collection {
         component: ClusterFeatureComponent,
         props: reactive({
           items,
-          groups: Object.values(groups),
+          groups,
         }),
         state: {
           headerTitle: 'featureInfo.cluster.headerTitle',
@@ -743,6 +841,7 @@ class FeatureInfo extends Collection {
    * @private
    */
   _clearInternal() {
+    this._destroyBalloonClampedListener();
     if (this._clearHighlightingCb) {
       this._clearHighlightingCb();
       this._clearHighlightingCb = null;

package/src/featureInfo/markdownBalloonFeatureInfoView.d.ts

@@ -26,12 +26,6 @@ declare class MarkdownBalloonFeatureInfoView extends BalloonFeatureInfoView {
      * @type {string | string[]}
      */
     template: string | string[];
-    /**
-     * @param {Record<string, unknown>} attributes
-     * @protected
-     * @returns {string}
-     */
-    protected _renderTemplate(attributes: Record<string, unknown>): string;
     /**
      * Supports markdown templates (e.g. {{someProperty}}) and style expressions to derive markdown rendering
      * @param {import("./featureInfo.js").FeatureInfoEvent} featureInfo

package/src/featureInfo/markdownBalloonFeatureInfoView.js

@@ -1,5 +1,3 @@
-import { renderTemplate } from '@vcmap/core';
-import { parseAndSanitizeMarkdown } from '../components/form-output/markdownHelper.js';
 import BalloonFeatureInfoView from './balloonFeatureInfoView.js';
 import MarkdownBalloonComponent from './MarkdownBalloonComponent.vue';
 
@@ -39,15 +37,6 @@ class MarkdownBalloonFeatureInfoView extends BalloonFeatureInfoView {
       : options.template;
   }
 
-  /**
-   * @param {Record<string, unknown>} attributes
-   * @protected
-   * @returns {string}
-   */
-  _renderTemplate(attributes) {
-    return renderTemplate(this.template, attributes);
-  }
-
   /**
    * Supports markdown templates (e.g. {{someProperty}}) and style expressions to derive markdown rendering
    * @param {import("./featureInfo.js").FeatureInfoEvent} featureInfo
@@ -58,9 +47,11 @@ class MarkdownBalloonFeatureInfoView extends BalloonFeatureInfoView {
     const properties = super.getProperties(featureInfo, layer);
     return {
       ...properties,
-      content: parseAndSanitizeMarkdown(
-        this._renderTemplate({ ...properties, ...properties.attributes }),
-      ),
+      template: this.template,
+      context: {
+        ...properties,
+        ...properties.attributes,
+      },
     };
   }
 

package/src/featureInfo/markdownFeatureInfoView.d.ts

@@ -3,14 +3,14 @@ export type MarkdownFeatureInfoViewOptions = import("./abstractFeatureInfoView.j
     template: string | string[];
 };
 export type MarkdownFeatureInfoViewProps = import("./abstractFeatureInfoView.js").FeatureInfoProps & {
-    html: string;
+    template: string;
 };
 /**
  * @typedef {import("./abstractFeatureInfoView.js").FeatureInfoViewOptions & { template: string | string[] }} MarkdownFeatureInfoViewOptions
  * @property {string | string[]} template - a string or an array of strings which will be concatenated using \n
  */
 /**
- * @typedef {import("./abstractFeatureInfoView.js").FeatureInfoProps & { html: string }} MarkdownFeatureInfoViewProps
+ * @typedef {import("./abstractFeatureInfoView.js").FeatureInfoProps & { template: string }} MarkdownFeatureInfoViewProps
  */
 /**
  * @class
@@ -26,12 +26,6 @@ declare class MarkdownFeatureInfoView extends AbstractFeatureInfoView {
      * @type {string | string[]}
      */
     template: string | string[];
-    /**
-     * @param {Record<string, unknown>} attributes
-     * @protected
-     * @returns {string}
-     */
-    protected _renderTemplate(attributes: Record<string, unknown>): string;
     /**
      * Supports markdown templates (e.g. {{someProperty}}) and style expressions to derive a markdown rendering
      * @param {import("./featureInfo.js").FeatureInfoEvent} featureInfo

package/src/featureInfo/markdownFeatureInfoView.js

@@ -1,6 +1,5 @@
-import { renderTemplate } from '@vcmap/core';
 import AbstractFeatureInfoView from './abstractFeatureInfoView.js';
-import VcsMarkdown from '../components/form-output/VcsMarkdown.vue';
+import VcsTemplateMarkdown from '../components/form-output/VcsTemplateMarkdown.vue';
 
 /**
  * @typedef {import("./abstractFeatureInfoView.js").FeatureInfoViewOptions & { template: string | string[] }} MarkdownFeatureInfoViewOptions
@@ -8,7 +7,7 @@ import VcsMarkdown from '../components/form-output/VcsMarkdown.vue';
  */
 
 /**
- * @typedef {import("./abstractFeatureInfoView.js").FeatureInfoProps & { html: string }} MarkdownFeatureInfoViewProps
+ * @typedef {import("./abstractFeatureInfoView.js").FeatureInfoProps & { template: string }} MarkdownFeatureInfoViewProps
  */
 
 /**
@@ -28,7 +27,7 @@ class MarkdownFeatureInfoView extends AbstractFeatureInfoView {
    * @param {MarkdownFeatureInfoViewOptions} options
    */
   constructor(options) {
-    super(options, VcsMarkdown);
+    super(options, VcsTemplateMarkdown);
 
     /**
      * @type {string | string[]}
@@ -38,15 +37,6 @@ class MarkdownFeatureInfoView extends AbstractFeatureInfoView {
       : options.template;
   }
 
-  /**
-   * @param {Record<string, unknown>} attributes
-   * @protected
-   * @returns {string}
-   */
-  _renderTemplate(attributes) {
-    return renderTemplate(this.template, attributes);
-  }
-
   /**
    * Supports markdown templates (e.g. {{someProperty}}) and style expressions to derive a markdown rendering
    * @param {import("./featureInfo.js").FeatureInfoEvent} featureInfo
@@ -57,10 +47,11 @@ class MarkdownFeatureInfoView extends AbstractFeatureInfoView {
     const properties = super.getProperties(featureInfo, layer);
     return {
       ...properties,
-      content: this._renderTemplate({
+      template: this.template,
+      context: {
         ...properties,
         ...properties.attributes,
-      }),
+      },
     };
   }