@vcmap/ui 6.1.0-rc.2 → 6.1.0-rc.3

package/src/featureInfo/featureInfo.js

@@ -12,6 +12,11 @@ import {
   VectorStyleItem,
   markVolatile,
   maxZIndex,
+  vectorClusterGroupName,
+  hidden,
+  isProvidedClusterFeature,
+  alreadyTransformedToImage,
+  ObliqueMap,
 } from '@vcmap/core';
 import { getLogger as getLoggerByName } from '@vcsuite/logger';
 import {
@@ -24,6 +29,7 @@ import { Feature } from 'ol';
 import { check, maybe, oneOf } from '@vcsuite/check';
 
 import { reactive } from 'vue';
+import { WindowSlot } from '../manager/window/windowManager.js';
 import { vcsAppSymbol } from '../pluginHelper.js';
 import FeatureInfoInteraction from './featureInfoInteraction.js';
 import AbstractFeatureInfoView from './abstractFeatureInfoView.js';
@@ -36,6 +42,7 @@ import { getDefaultPrimaryColor } from '../vuePlugins/vuetify.js';
 import { ToolboxType } from '../manager/toolbox/toolboxManager.js';
 import MarkdownBalloonFeatureInfoView from './markdownBalloonFeatureInfoView.js';
 import IframeWmsFeatureInfoView from './iframeWmsFeatureInfoView.js';
+import ClusterFeatureComponent from './ClusterFeatureComponent.vue';
 
 /** @typedef {import("ol").Feature|import("@vcmap-cesium/engine").Cesium3DTileFeature|import("@vcmap-cesium/engine").Cesium3DTilePointFeature|import("@vcmap-cesium/engine").Entity} FeatureType */
 
@@ -64,6 +71,43 @@ export const featureInfoClassRegistry = new ClassRegistry();
  */
 export const featureInfoViewSymbol = Symbol('featureInfoView');
 
+/**
+ *
+ * @param {import("ol/style/Style.js").default?} style
+ * @param {import("@vcmap-cesium/engine").Color} fillColor
+ * @returns {import("ol/style/Style.js").default}
+ */
+export function getHighlightStyleFromStyle(style, fillColor) {
+  const highlightStyle =
+    style?.clone?.() ??
+    new VectorStyleItem(getDefaultVectorStyleItemOptions()).style;
+  if (highlightStyle.getText()) {
+    if (highlightStyle.getText().getFill()) {
+      highlightStyle.getText().getFill().setColor(fillColor.toCssColorString());
+    }
+    highlightStyle
+      .getText()
+      .setScale((highlightStyle.getText().getScale() ?? 1) * 2);
+  }
+  if (highlightStyle.getImage()) {
+    highlightStyle
+      .getImage()
+      .setScale(highlightStyle.getImage().getScale() * 2);
+  }
+  if (highlightStyle.getStroke()) {
+    highlightStyle.getStroke().setColor(fillColor.toCssColorString());
+    highlightStyle
+      .getStroke()
+      .setWidth(highlightStyle.getStroke().getWidth() * 2);
+  }
+  if (highlightStyle.getFill()) {
+    const color = fillColor.toBytes();
+    color[3] /= 255;
+    highlightStyle.getFill().setColor(color);
+  }
+  return highlightStyle;
+}
+
 /**
  * @param {FeatureType} feature
  * @param {import("@vcmap/core").Layer} layer
@@ -71,7 +115,7 @@ export const featureInfoViewSymbol = Symbol('featureInfoView');
  * @returns {import("ol/style/Style.js").default|import("@vcmap/core").VectorStyleItem}
  */
 export function getHighlightStyle(feature, layer, defaultFillColor) {
-  if (layer && layer.highlightStyle) {
+  if (layer?.highlightStyle) {
     return layer.highlightStyle;
   }
 
@@ -81,32 +125,32 @@ export function getHighlightStyle(feature, layer, defaultFillColor) {
     if (typeof style === 'function') {
       style = style(feature, 1);
     }
-    style =
-      style?.clone?.() ??
-      new VectorStyleItem(getDefaultVectorStyleItemOptions()).style;
-    if (style.getText()) {
-      if (style.getText().getFill()) {
-        style.getText().getFill().setColor(fillColor.toCssColorString());
-      }
-      style.getText().setScale((style.getText().getScale() ?? 1) * 2);
-    }
-    if (style.getImage()) {
-      style.getImage().setScale(style.getImage().getScale() * 2);
-    }
-    if (style.getStroke()) {
-      style.getStroke().setColor(fillColor.toCssColorString());
-      style.getStroke().setWidth(style.getStroke().getWidth() * 2);
-    }
-    if (style.getFill()) {
-      const color = fillColor.toBytes();
-      color[3] /= 255;
-      style.getFill().setColor(color);
-    }
-    return style;
+    return getHighlightStyleFromStyle(style, fillColor);
   }
   return fromCesiumColor(fillColor);
 }
 
+/**
+ * @param {import("ol").Feature} clusterFeature
+ * @param {import("@vcmap/core").VectorClusterGroup} clusterGroup
+ * @param {import("ol/style/Style.js").default} clusterStyle
+ * @param {string} defaultFillColor
+ * @returns {import("ol/style/Style.js").default}
+ */
+export function getClusterHighlightStyle(
+  clusterFeature,
+  clusterGroup,
+  clusterStyle,
+  defaultFillColor,
+) {
+  if (clusterGroup?.highlightStyle) {
+    return clusterGroup.getHighlightStyleForFeature(clusterFeature);
+  }
+
+  const fillColor = Color.fromCssColorString(defaultFillColor).withAlpha(0.8);
+  return getHighlightStyleFromStyle(clusterStyle, fillColor);
+}
+
 /**
  * @param {import("../vcsUiApp.js").default} app
  * @returns {FeatureInfoSession}
@@ -158,7 +202,7 @@ function setupFeatureInfoTool(app) {
         session.stopped.addEventListener(() => {
           action.active = false;
           session = null;
-          app.featureInfo.clear();
+          app.featureInfo.clearSelection();
           action.title = 'featureInfo.activateToolTitle';
         });
         this.active = true;
@@ -266,7 +310,12 @@ class FeatureInfo extends Collection {
      */
     this._windowId = null;
     /**
-     * @type {VcsEvent<FeatureType>}
+     * @type {string|null}
+     * @private
+     */
+    this._clusterWindowId = null;
+    /**
+     * @type {VcsEvent<FeatureType|null>}
      * @private
      */
     this._featureChanged = new VcsEvent();
@@ -280,6 +329,21 @@ class FeatureInfo extends Collection {
      * @private
      */
     this._selectedFeatureId = null;
+    /**
+     * @type {VcsEvent<import("ol").Feature|null>}
+     * @private
+     */
+    this._clusterFeatureChanged = new VcsEvent();
+    /**
+     * @type {import("ol").Feature|null}
+     * @private
+     */
+    this._selectedClusterFeature = null;
+    /**
+     * @type {string|null}
+     * @private
+     */
+    this._selectedClusterFeatureId = null;
     /**
      * @type {Array<function():void>}
      * @private
@@ -305,18 +369,39 @@ 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) {
-          this.clear();
+          this.clearFeature();
+        }
+        if (id === this._clusterWindowId) {
+          this.clearCluster();
         }
       }),
       this._app.moduleAdded.addEventListener(() => {
-        this.clear();
+        this.clearSelection();
         this._destroyFeatureInfoTool();
         this._destroyFeatureInfoTool = setupFeatureInfoTool(this._app);
       }),
-      this._app.moduleRemoved.addEventListener(() => this.clear()),
+      this._app.moduleRemoved.addEventListener(() => this.clearSelection()),
     ];
     /**
      * A vector layer to render provided features on
@@ -332,6 +417,8 @@ class FeatureInfo extends Collection {
   }
 
   /**
+   * Emitted whenever a feature is selected or cleared.
+   * Does not reflect cluster feature changes!
    * @type {VcsEvent<null|FeatureType>}
    */
   get featureChanged() {
@@ -352,6 +439,28 @@ class FeatureInfo extends Collection {
     return this._selectedFeatureId;
   }
 
+  /**
+   * Emitted whenever a cluster feature is selected or cleared.
+   * @type {VcsEvent<null|import("ol").Feature>}
+   */
+  get clusterFeatureChanged() {
+    return this._clusterFeatureChanged;
+  }
+
+  /**
+   * @type {null|import("ol").Feature}
+   */
+  get selectedClusterFeature() {
+    return this._selectedClusterFeature;
+  }
+
+  /**
+   * @type {null|string}
+   */
+  get selectedClusterFeatureId() {
+    return this._selectedClusterFeatureId;
+  }
+
   /**
    * The window id of the current features FeatureInfoView window
    * @type {string|null}
@@ -360,6 +469,14 @@ class FeatureInfo extends Collection {
     return this._windowId;
   }
 
+  /**
+   * The window id of the current cluster feature window
+   * @type {string|null}
+   */
+  get clusterWindowId() {
+    return this._clusterWindowId;
+  }
+
   /**
    * @private
    */
@@ -426,10 +543,19 @@ class FeatureInfo extends Collection {
 
     if (usedFeatureInfoView && layer) {
       this._clearInternal();
+      if (
+        this._selectedClusterFeature &&
+        !this._selectedClusterFeature.get('features').includes(feature)
+      ) {
+        this.clearCluster();
+      }
       if (feature[isProvidedFeature]) {
         this._ensureScratchLayer();
-        this._scratchLayer.addFeatures([feature]);
-        const featureId = feature.getId(); // make sure to grab ID after adding it to the layer
+        // we need to clone the feature to avoid changing vcsLayerNameSymbol on the original feature
+        const clonedFeature = feature.clone();
+        clonedFeature.setId(feature.getId());
+        this._scratchLayer.addFeatures([clonedFeature]);
+        const featureId = clonedFeature.getId(); // make sure to grab ID after adding it to the layer
         this._scratchLayer.featureVisibility.highlight({
           [featureId]: getHighlightStyle(
             feature,
@@ -440,6 +566,29 @@ class FeatureInfo extends Collection {
         });
         this._clearHighlightingCb = () =>
           this._scratchLayer.featureVisibility.unHighlight([featureId]);
+      } else if (layer.vectorClusterGroup) {
+        this._ensureScratchLayer();
+        const clone = feature.clone();
+        const featureId = feature.getId();
+        this._scratchLayer.vectorProperties.setValuesForFeatures(
+          layer.vectorProperties.getValuesForFeatures([clone]),
+          [clone],
+        );
+        const eyeOffset = clone.get('olcs_eyeOffset') ?? [0, 0, 0];
+        eyeOffset[2] -= 10;
+        clone.set('olcs_eyeOffset', eyeOffset);
+        clone.setId(featureId);
+        this._scratchLayer.addFeatures([clone]);
+        this._scratchLayer.featureVisibility.highlight({
+          [featureId]: getHighlightStyle(
+            feature,
+            layer,
+            this._app.uiConfig.config.primaryColor ??
+              getDefaultPrimaryColor(this._app),
+          ),
+        });
+        this._clearHighlightingCb = () =>
+          this._scratchLayer.featureVisibility.unHighlight([clone]);
       } else if (layer.featureVisibility) {
         const featureId = feature.getId();
         layer.featureVisibility.highlight({
@@ -470,10 +619,117 @@ class FeatureInfo extends Collection {
       this._selectedFeatureId = feature.getId();
       this._featureChanged.raiseEvent(this._selectedFeature);
     } else {
-      this.clear();
+      this.clearSelection();
     }
   }
 
+  /**
+   * 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
+   * the same VcsApp as provided to the FeatureInfo on construction. if not providing a feature info view, then c) said layer must have a featureInfo property set on
+   * its properties bag and d) said featureInfo property must provide the name of a FeatureInfoView present on this FeatureInfos
+   * collection.
+   * The cluster feature will be cloned, highlighted and added on an internal scratch layer to ensure availability until deselection.
+   * The original cluster feature will be hidden until deselection.
+   * @param {import("ol").Feature} clusterFeature
+   * @returns {Promise<void>}
+   */
+  async selectClusterFeature(clusterFeature) {
+    this.clearFeature();
+    this._clearClusterInternal();
+    const id = `cluster-at-${clusterFeature.getGeometry().getCoordinates().join('-')}`;
+
+    this._ensureScratchLayer();
+    const feature = clusterFeature.clone();
+    feature.setId(id);
+
+    clusterFeature[hidden] = true;
+    clusterFeature.changed();
+
+    const fillColor =
+      this._app.uiConfig.config.primaryColor ??
+      getDefaultPrimaryColor(this._app);
+
+    if (clusterFeature[vectorClusterGroupName]) {
+      const clusterGroup = this._app.vectorClusterGroups.getByKey(
+        clusterFeature[vectorClusterGroupName],
+      );
+      this._scratchLayer.vectorProperties.setValuesForFeatures(
+        clusterGroup.vectorProperties.getValuesForFeatures([feature]),
+        [feature],
+      );
+      const clusterStyle = clusterGroup.style.createStyleFunction((layerName) =>
+        this._app.layers.getByKey(layerName),
+      )(clusterFeature, 1);
+      const highlightStyle = getClusterHighlightStyle(
+        clusterFeature,
+        clusterGroup,
+        clusterStyle,
+        fillColor,
+      );
+      feature.setStyle(highlightStyle);
+    } else if (clusterFeature[isProvidedClusterFeature]) {
+      feature.setStyle(
+        fromCesiumColor(Color.fromCssColorString(fillColor)).style,
+      );
+    }
+
+    if (this._app.maps.activeMap instanceof ObliqueMap) {
+      feature.getGeometry()[alreadyTransformedToImage] = true;
+    }
+    this._scratchLayer.addFeatures([feature]);
+
+    const features = clusterFeature.get('features');
+    const groups = {};
+    const items = features.map((f) => {
+      const listItem = reactive({
+        name: f.getId(),
+        title: f.getAttributes()?.title || f.getAttributes()?.name || f.getId(),
+        disabled: !this._getFeatureInfoViewForFeature(f),
+        selectionChanged: (value) => {
+          if (value) {
+            this.selectFeature(f);
+          } else {
+            this.clearFeature();
+          }
+        },
+      });
+      const layerName = f[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;
+    });
+
+    this._clusterWindowId = id;
+    this._app.windowManager.add(
+      {
+        id,
+        component: ClusterFeatureComponent,
+        props: reactive({
+          items,
+          groups: Object.values(groups),
+        }),
+        state: {
+          headerTitle: 'featureInfo.cluster.headerTitle',
+        },
+        slot: WindowSlot.DYNAMIC_LEFT,
+      },
+      vcsAppSymbol,
+    );
+
+    this._selectedClusterFeature = clusterFeature;
+    this._selectedClusterFeatureId = id;
+    this._clusterFeatureChanged.raiseEvent(this._selectedClusterFeature);
+  }
+
   /**
    * Clears the current feature. remove window, highlighting and provided feature.
    * @private
@@ -487,16 +743,35 @@ class FeatureInfo extends Collection {
       this._app.windowManager.remove(this._windowId);
       this._windowId = null;
     }
+    if (this._scratchLayer && this._selectedFeatureId) {
+      this._scratchLayer.removeFeaturesById([this._selectedFeatureId]);
+    }
+  }
 
-    if (this._scratchLayer) {
-      this._scratchLayer.removeAllFeatures();
+  /**
+   * Clears the current cluster feature. remove window, highlighting and provided cluster feature.
+   * @private
+   */
+  _clearClusterInternal() {
+    if (this._clusterWindowId) {
+      this._app.windowManager.remove(this._clusterWindowId);
+      this._clusterWindowId = null;
+    }
+
+    if (this._selectedClusterFeature) {
+      this._selectedClusterFeature[hidden] = false;
+      this._selectedClusterFeature.changed();
+
+      if (this._scratchLayer) {
+        this._scratchLayer.removeFeaturesById([this._selectedClusterFeatureId]);
+      }
     }
   }
 
   /**
    * Deselecting feature clears highlighting and closes FeatureInfoView. fires feature changed with null
    */
-  clear() {
+  clearFeature() {
     this._clearInternal();
     if (this._selectedFeature) {
       this._selectedFeature = null;
@@ -505,12 +780,45 @@ class FeatureInfo extends Collection {
     }
   }
 
+  /**
+   * Deselecting and removing cluster feature. Closing cluster window and fires cluster feature changed with null
+   */
+  clearCluster() {
+    this._clearClusterInternal();
+    if (this._selectedClusterFeature) {
+      this._selectedClusterFeature[hidden] = false;
+      this._selectedClusterFeature = null;
+      this._clusterFeatureChanged.raiseEvent(this._selectedClusterFeature);
+    }
+  }
+
+  /**
+   * @deprecated
+   */
+  clear() {
+    getLogger().deprecate(
+      'clear',
+      'Use clearSelection instead. Clear will clear the FeatureInfo collection removing all registered FeatureInfoViews in feature.',
+    );
+    this.clearSelection();
+  }
+
+  /**
+   * Clears selection by deselecting current feature and cluster and closing all related windows.
+   * Fires feature changed and cluster feature changed events with null.
+   */
+  clearSelection() {
+    this.clearFeature();
+    this.clearCluster();
+  }
+
   /**
    * Destroys the feature info and all its events & listeners
    */
   destroy() {
     super.destroy();
     this._clearInternal();
+    this._clearClusterInternal();
     this._featureChanged.destroy();
     this._destroyFeatureInfoTool();
     if (this._scratchLayer) {

package/src/featureInfo/featureInfoInteraction.js

@@ -2,6 +2,8 @@ import {
   AbstractInteraction,
   EventType,
   ModificationKeyType,
+  vectorClusterGroupName,
+  isProvidedClusterFeature,
 } from '@vcmap/core';
 
 /**
@@ -28,9 +30,22 @@ class FeatureInfoInteraction extends AbstractInteraction {
    */
   async pipe(event) {
     if (event.feature) {
-      if (
+      const featureId = event.feature.getId();
+      const isClusterFeature = !!(
+        event.feature[vectorClusterGroupName] ||
+        event.feature[isProvidedClusterFeature]
+      );
+      if (isClusterFeature) {
+        if (
+          !this._featureInfo.selectedClusterFeature ||
+          featureId !== this._featureInfo.selectedClusterFeatureId
+        ) {
+          event.stopPropagation = true;
+          await this._featureInfo.selectClusterFeature(event.feature);
+        }
+      } else if (
         !this._featureInfo.selectedFeature ||
-        event.feature.getId() !== this._featureInfo.selectedFeatureId
+        featureId !== this._featureInfo.selectedFeatureId
       ) {
         event.stopPropagation = true;
         await this._featureInfo.selectFeature(event.feature, event.position, [
@@ -39,7 +54,7 @@ class FeatureInfoInteraction extends AbstractInteraction {
         ]);
       }
     } else {
-      await this._featureInfo.clear();
+      await this._featureInfo.clearSelection();
     }
     return event;
   }

package/src/featureInfo/iframeFeatureInfoView.js

@@ -1,4 +1,4 @@
-import { renderTemplate } from '../components/form-output/markdownHelper.js';
+import { renderTemplate } from '@vcmap/core';
 import AbstractFeatureInfoView from './abstractFeatureInfoView.js';
 import IframeComponent from './IframeComponent.vue';
 

package/src/featureInfo/markdownBalloonFeatureInfoView.js

@@ -1,7 +1,5 @@
-import {
-  parseAndSanitizeMarkdown,
-  renderTemplate,
-} from '../components/form-output/markdownHelper.js';
+import { renderTemplate } from '@vcmap/core';
+import { parseAndSanitizeMarkdown } from '../components/form-output/markdownHelper.js';
 import BalloonFeatureInfoView from './balloonFeatureInfoView.js';
 import MarkdownBalloonComponent from './MarkdownBalloonComponent.vue';
 

package/src/featureInfo/markdownFeatureInfoView.js

@@ -1,4 +1,4 @@
-import { renderTemplate } from '../components/form-output/markdownHelper.js';
+import { renderTemplate } from '@vcmap/core';
 import AbstractFeatureInfoView from './abstractFeatureInfoView.js';
 import VcsMarkdown from '../components/form-output/VcsMarkdown.vue';
 

package/src/i18n/de.d.ts

@@ -73,6 +73,11 @@ declare namespace messages {
             counter: string;
             counterSize: string;
         };
+        fileUpload: {
+            title: string;
+            divider: string;
+            browse: string;
+        };
         timePicker: {
             am: string;
             pm: string;
@@ -278,6 +283,7 @@ declare namespace messages {
             export { name_2 as name };
             export let checkBoxText: string;
             export let buttonTitle: string;
+            export let dontShowAgain: string;
         }
         export namespace customScreen {
             let name_3: string;
@@ -457,14 +463,21 @@ declare namespace messages {
     export namespace featureInfo {
         let activateToolTitle: string;
         let deactivateToolTitle: string;
+        namespace cluster {
+            export let headerTitle: string;
+            export let expand: string;
+            export let collapse: string;
+            let empty_2: string;
+            export { empty_2 as empty };
+        }
     }
     export namespace legend {
         let title_17: string;
         export { title_17 as title };
         let tooltip_5: string;
         export { tooltip_5 as tooltip };
-        let empty_2: string;
-        export { empty_2 as empty };
+        let empty_3: string;
+        export { empty_3 as empty };
         export let openInNew: string;
         export let defaultLabelText: string;
     }
@@ -495,8 +508,8 @@ declare namespace messages {
             export { title_21 as title };
             let tooltip_7: string;
             export { tooltip_7 as tooltip };
-            let empty_3: string;
-            export { empty_3 as empty };
+            let empty_4: string;
+            export { empty_4 as empty };
         }
         export namespace imprint {
             let title_22: string;

package/src/i18n/de.js

@@ -172,6 +172,7 @@ const messages = {
       checkBoxText:
         'Bitte akzeptieren sie die [Bedingungen](https://vc.systems/) um Fortzufahren',
       buttonTitle: 'Weiter',
+      dontShowAgain: 'Diese Nachricht nicht erneut anzeigen',
     },
     customScreen: {
       name: 'Benutzerdefinierter Screen',
@@ -325,6 +326,12 @@ const messages = {
   featureInfo: {
     activateToolTitle: 'Informationen abfragen',
     deactivateToolTitle: 'Informationen abfragen',
+    cluster: {
+      headerTitle: 'Gruppeninformationen',
+      expand: 'Informationsliste anzeigen',
+      collapse: 'Informationsliste minimieren',
+      empty: 'Keine Informationen verfügbar',
+    },
   },
   legend: {
     title: 'Legende',