@vcmap/ui 5.1.8 → 5.2.1

package/src/featureInfo/MarkdownBalloonComponent.vue

@@ -0,0 +1,24 @@
+<template>
+  <BalloonComponent v-bind="{ ...$attrs }">
+    <div class="pa-2" v-html="html" />
+  </BalloonComponent>
+</template>
+<script>
+  import BalloonComponent from './BalloonComponent.vue';
+
+  /**
+   * @description A balloon showing markdown content
+   */
+  export default {
+    name: 'MarkdownBalloonComponent',
+    props: {
+      html: {
+        type: String,
+        required: true,
+      },
+    },
+    components: {
+      BalloonComponent,
+    },
+  };
+</script>

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

@@ -0,0 +1,12 @@
+declare const _default: import("vue").DefineComponent<{
+    html: {
+        type: StringConstructor;
+        required: true;
+    };
+}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    html: {
+        type: StringConstructor;
+        required: true;
+    };
+}>>, {}>;
+export default _default;

package/src/featureInfo/abstractFeatureInfoView.js

@@ -1,6 +1,7 @@
 import { VcsObject } from '@vcmap/core';
 import { WindowSlot } from '../manager/window/windowManager.js';
 import { defaultTagOptions } from '../components/tables/VcsTable.vue';
+import { replaceAttributes } from '../application/markdownHelper.js';
 
 /**
  * @typedef {Object} FeatureInfoProps
@@ -29,7 +30,7 @@ import { defaultTagOptions } from '../components/tables/VcsTable.vue';
  * @property {Object<string,string>} [keyMapping] - object providing text replacements or i18n strings for attribute keys
  * @property {Object<string, string|Object<string,string>>} [valueMapping] - object providing text replacements or i18n strings for attribute values
  * @property {Object<string,HTMLTagOptions>} [tags] - object with keys rendered as special html element. Value contains html options
- * @property {import("../manager/window/windowManager.js").WindowComponentOptions} [window] - state, slot, position can be set. Other options are predefined.
+ * @property {import("../manager/window/windowManager.js").WindowComponentOptions} [window] - state, slot, position can be set. Other options are predefined. headerTitle of window state can be a template string, e.g. "{{myAttribute}}" or ["{{layerName}}", " - ", "{{myAttribute}}"]
  */
 
 /**
@@ -125,22 +126,24 @@ export function applyKeyMapping(attributes, mapping) {
       return 0;
     })
     .forEach((mappingKey) => {
-      if (Object.hasOwn(attributes, mappingKey)) {
-        attributes[mapping[mappingKey]] = attributes[mappingKey];
-        delete attributes[mappingKey];
-      } else {
-        const mappingKeys = mappingKey.split('.');
-        mappingKeys.reduce((obj, key, index) => {
-          if (
-            obj &&
-            Object.hasOwn(obj, key) &&
-            index === mappingKeys.length - 1
-          ) {
-            attributes[mapping[mappingKey]] = obj[key];
-            delete obj[key];
-          }
-          return obj?.[key];
-        }, attributes);
+      if (mappingKey !== mapping[mappingKey]) {
+        if (Object.hasOwn(attributes, mappingKey)) {
+          attributes[mapping[mappingKey]] = attributes[mappingKey];
+          delete attributes[mappingKey];
+        } else {
+          const mappingKeys = mappingKey.split('.');
+          mappingKeys.reduce((obj, key, index) => {
+            if (
+              obj &&
+              Object.hasOwn(obj, key) &&
+              index === mappingKeys.length - 1
+            ) {
+              attributes[mapping[mappingKey]] = obj[key];
+              delete obj[key];
+            }
+            return obj?.[key];
+          }, attributes);
+        }
       }
     });
 }
@@ -226,6 +229,7 @@ export function applyOlcsAttributeFilter(attributes, keys = []) {
 export function applyEmptyAttributesFilter(attributes) {
   return Object.keys(attributes).reduce((obj, key) => {
     if (
+      attributes[key] !== null &&
       typeof attributes[key] === 'object' &&
       Object.keys(attributes[key]).length === 0
     ) {
@@ -236,6 +240,32 @@ export function applyEmptyAttributesFilter(attributes) {
   }, {});
 }
 
+/**
+ *
+ * @param {import("../vcsUiApp.js").default} app
+ * @param {import("../manager/window/windowManager.js").WindowState} state
+ * @param {Object} attributes
+ * @returns {import("../manager/window/windowManager.js").WindowState}
+ */
+function getWindowState(app, state, attributes) {
+  let headerTitle = state?.headerTitle;
+  if (headerTitle) {
+    if (Array.isArray(headerTitle)) {
+      headerTitle = headerTitle.map((item) =>
+        replaceAttributes(item, attributes),
+      );
+    } else {
+      headerTitle = replaceAttributes(headerTitle, attributes);
+    }
+  }
+  return {
+    headerIcon: '$vcsInfo',
+    infoUrl: app.getHelpUrlCallback('/tools/infoTool.html'),
+    ...state,
+    headerTitle: headerTitle || attributes.layerName,
+  };
+}
+
 /**
  * Abstract class to be extended by FeatureInfoView classes
  * Subclasses must always provide a component and may overwrite class methods.
@@ -393,11 +423,10 @@ class AbstractFeatureInfoView extends VcsObject {
    */
   getWindowComponentOptions(app, featureInfo, layer) {
     return {
-      state: this.window.state ?? {
-        headerTitle: layer.properties?.title || layer.name,
-        headerIcon: '$vcsInfo',
-        infoUrl: app.getHelpUrlCallback('/tools/infoTool.html'),
-      },
+      state: getWindowState(app, this.window.state, {
+        ...this.getAttributes(featureInfo.feature),
+        layerName: layer.properties?.title || layer.name,
+      }),
       slot: this.window.slot ?? WindowSlot.DYNAMIC_RIGHT,
       component: this.component,
       position: this.window.position,
@@ -419,6 +448,9 @@ class AbstractFeatureInfoView extends VcsObject {
     if (this.valueMapping) {
       config.valueMapping = JSON.parse(JSON.stringify(this.valueMapping));
     }
+    if (this.tags) {
+      config.tags = JSON.parse(JSON.stringify(this.tags));
+    }
     if (Object.keys(this._window).length > 0) {
       config.window = { ...this._window };
     }

package/src/featureInfo/addressBalloonFeatureInfoView.d.ts

@@ -1,5 +1,5 @@
 export default AddressBalloonFeatureInfoView;
-export type AddressBalloonFeatureInfoViewOptions = import("./abstractFeatureInfoView.js").FeatureInfoViewOptions & {
+export type AddressBalloonFeatureInfoViewOptions = import("./balloonFeatureInfoView.js").BalloonFeatureInfoViewOptions & {
     addressName?: string | null;
     street?: string | null;
     number?: string | null;
@@ -8,7 +8,7 @@ export type AddressBalloonFeatureInfoViewOptions = import("./abstractFeatureInfo
     country?: string | null;
 };
 /**
- * @typedef {import("./abstractFeatureInfoView.js").FeatureInfoViewOptions &{
+ * @typedef {import("./balloonFeatureInfoView.js").BalloonFeatureInfoViewOptions & {
  *   addressName?: string|null,
  *   street?: string|null,
  *   number?: string|null,

package/src/featureInfo/addressBalloonFeatureInfoView.js

@@ -4,7 +4,7 @@ import BalloonFeatureInfoView, {
 import AddressBalloonComponent from './AddressBalloonComponent.vue';
 
 /**
- * @typedef {import("./abstractFeatureInfoView.js").FeatureInfoViewOptions &{
+ * @typedef {import("./balloonFeatureInfoView.js").BalloonFeatureInfoViewOptions & {
  *   addressName?: string|null,
  *   street?: string|null,
  *   number?: string|null,

package/src/featureInfo/balloonFeatureInfoView.js

@@ -115,7 +115,7 @@ class BalloonFeatureInfoView extends AbstractFeatureInfoView {
               properties.attributes,
               this.balloonTitle,
             )
-          : properties.layerProperties.title,
+          : properties.layerProperties.title || layer.name,
       balloonSubtitle:
         this.balloonSubtitle != null
           ? extractNestedKey(

package/src/featureInfo/balloonHelper.js

@@ -78,17 +78,24 @@ export function setBalloonPosition(windowManager, id, windowPosition, target) {
   if (!windowPosition) {
     return;
   }
-  windowManager.setWindowPositionOptions(
-    id,
-    getWindowPositionOptionsFromMapEvent(
-      new Cartesian2(
-        windowPosition.x - balloonOffset.x,
-        windowPosition.y - balloonOffset.y,
-      ),
-      target,
-      WindowAlignment.BOTTOM_LEFT,
+
+  const { width, height, maxWidth, maxHeight } = windowManager.get(id).position;
+  const mapWindowPosition = getWindowPositionOptionsFromMapEvent(
+    new Cartesian2(
+      windowPosition.x - balloonOffset.x,
+      windowPosition.y - balloonOffset.y,
     ),
+    target,
+    WindowAlignment.BOTTOM_LEFT,
   );
+
+  windowManager.setWindowPositionOptions(id, {
+    width,
+    height,
+    maxWidth,
+    maxHeight,
+    ...mapWindowPosition,
+  });
 }
 
 /**

package/src/featureInfo/featureInfo.js

@@ -30,8 +30,11 @@ import TableFeatureInfoView from './tableFeatureInfoView.js';
 import IframeFeatureInfoView from './iframeFeatureInfoView.js';
 import AddressBalloonFeatureInfoView from './addressBalloonFeatureInfoView.js';
 import BalloonFeatureInfoView from './balloonFeatureInfoView.js';
+import MarkdownFeatureInfoView from './markdownFeatureInfoView.js';
 import { getDefaultPrimaryColor } from '../vuePlugins/vuetify.js';
 import { ToolboxType } from '../manager/toolbox/toolboxManager.js';
+import MarkdownBalloonFeatureInfoView from './markdownBalloonFeatureInfoView.js';
+import IframeWmsFeatureInfoView from './iframeWmsFeatureInfoView.js';
 
 /** @typedef {import("ol").Feature|import("@vcmap-cesium/engine").Cesium3DTileFeature|import("@vcmap-cesium/engine").Cesium3DTilePointFeature|import("@vcmap-cesium/engine").Entity} FeatureType */
 
@@ -510,6 +513,10 @@ featureInfoClassRegistry.registerClass(
   IframeFeatureInfoView.className,
   IframeFeatureInfoView,
 );
+featureInfoClassRegistry.registerClass(
+  IframeWmsFeatureInfoView.className,
+  IframeWmsFeatureInfoView,
+);
 featureInfoClassRegistry.registerClass(
   BalloonFeatureInfoView.className,
   BalloonFeatureInfoView,
@@ -518,3 +525,11 @@ featureInfoClassRegistry.registerClass(
   AddressBalloonFeatureInfoView.className,
   AddressBalloonFeatureInfoView,
 );
+featureInfoClassRegistry.registerClass(
+  MarkdownBalloonFeatureInfoView.className,
+  MarkdownBalloonFeatureInfoView,
+);
+featureInfoClassRegistry.registerClass(
+  MarkdownFeatureInfoView.className,
+  MarkdownFeatureInfoView,
+);

package/src/featureInfo/iframeFeatureInfoView.js

@@ -1,24 +1,5 @@
 import AbstractFeatureInfoView from './abstractFeatureInfoView.js';
-
-/**
- * @description An iframe component
- * @vue-prop {string} src - Specifies the address of the document to embed in the <iframe>
- * @vue-prop {string} [title] - optional title for the <iframe>
- */
-const IframeComponent = {
-  name: 'IframeComponent',
-  props: {
-    src: {
-      type: String,
-      required: true,
-    },
-    title: {
-      type: String,
-      default: undefined,
-    },
-  },
-  template: '<iframe :src="src" :title="title" />',
-};
+import IframeComponent from './IframeComponent.vue';
 
 /**
  * @typedef {import("./abstractFeatureInfoView.js").FeatureInfoViewOptions & { src: string, title?: string }} IframeFeatureInfoViewOptions

package/src/featureInfo/iframeWmsFeatureInfoView.d.ts

@@ -0,0 +1,41 @@
+export default IframeWmsFeatureInfoView;
+export type IframeWmsFeatureInfoViewOptions = import("./abstractFeatureInfoView.js").FeatureInfoViewOptions & {
+    infoFormat: string;
+    title?: string;
+};
+/**
+ * @typedef {import("./abstractFeatureInfoView.js").FeatureInfoViewOptions & { infoFormat: string, title?: string }} IframeWmsFeatureInfoViewOptions
+ * @property {string} infoFormat - Specifies the response format of WMS GetFeatureInfo
+ * @property {string} [title] - optional title for the <iframe>
+ */
+/**
+ * @class
+ * @description An iframe view.
+ * @extends {AbstractFeatureInfoView}
+ */
+declare class IframeWmsFeatureInfoView extends AbstractFeatureInfoView {
+    /**
+     * @param {IframeWmsFeatureInfoViewOptions} options
+     */
+    constructor(options: IframeWmsFeatureInfoViewOptions);
+    /**
+     * @type {string}
+     */
+    infoFormat: string;
+    /**
+     * @type {string|undefined}
+     */
+    title: string | undefined;
+    /**
+     * Gets feature info from WMS GetFeatureInfo in html/text format
+     * @param {import("./featureInfo.js").FeatureInfoEvent} featureInfo
+     * @param {import("@vcmap/core").WMSLayer} layer
+     * @returns {import("./iframeFeatureInfoView.js").IframeFeatureInfoViewProps}
+     */
+    getProperties(featureInfo: import("./featureInfo.js").FeatureInfoEvent, layer: import("@vcmap/core").WMSLayer): import("./iframeFeatureInfoView.js").IframeFeatureInfoViewProps;
+    /**
+     * @returns {IframeWmsFeatureInfoViewOptions}
+     */
+    toJSON(): IframeWmsFeatureInfoViewOptions;
+}
+import AbstractFeatureInfoView from './abstractFeatureInfoView.js';

package/src/featureInfo/iframeWmsFeatureInfoView.js

@@ -0,0 +1,73 @@
+import { get as getOlProj } from 'ol/proj.js';
+import AbstractFeatureInfoView from './abstractFeatureInfoView.js';
+import IframeComponent from './IframeComponent.vue';
+
+/**
+ * @typedef {import("./abstractFeatureInfoView.js").FeatureInfoViewOptions & { infoFormat: string, title?: string }} IframeWmsFeatureInfoViewOptions
+ * @property {string} infoFormat - Specifies the response format of WMS GetFeatureInfo
+ * @property {string} [title] - optional title for the <iframe>
+ */
+
+/**
+ * @class
+ * @description An iframe view.
+ * @extends {AbstractFeatureInfoView}
+ */
+class IframeWmsFeatureInfoView extends AbstractFeatureInfoView {
+  /**
+   * @type {string}
+   */
+  static get className() {
+    return 'IframeWmsFeatureInfoView';
+  }
+
+  /**
+   * @param {IframeWmsFeatureInfoViewOptions} options
+   */
+  constructor(options) {
+    super(options, IframeComponent);
+
+    /**
+     * @type {string}
+     */
+    this.infoFormat = options.infoFormat || 'text/html';
+    /**
+     * @type {string|undefined}
+     */
+    this.title = options.title || undefined;
+  }
+
+  /**
+   * Gets feature info from WMS GetFeatureInfo in html/text format
+   * @param {import("./featureInfo.js").FeatureInfoEvent} featureInfo
+   * @param {import("@vcmap/core").WMSLayer} layer
+   * @returns {import("./iframeFeatureInfoView.js").IframeFeatureInfoViewProps}
+   */
+  getProperties(featureInfo, layer) {
+    return {
+      src: layer.featureProvider.wmsSource.getFeatureInfoUrl(
+        featureInfo.position,
+        1,
+        getOlProj('EPSG:3857'),
+        { INFO_FORMAT: this.infoFormat },
+      ),
+      title: this.title,
+    };
+  }
+
+  /**
+   * @returns {IframeWmsFeatureInfoViewOptions}
+   */
+  toJSON() {
+    const config = super.toJSON();
+    if (this.infoFormat) {
+      config.infoFormat = this.infoFormat;
+    }
+    if (this.title) {
+      config.title = this.title;
+    }
+    return config;
+  }
+}
+
+export default IframeWmsFeatureInfoView;

package/src/featureInfo/markdownBalloonFeatureInfoView.d.ts

@@ -0,0 +1,47 @@
+export default MarkdownBalloonFeatureInfoView;
+export type MarkdownBalloonFeatureInfoViewOptions = import("./balloonFeatureInfoView.js").BalloonFeatureInfoViewOptions & {
+    template: string | string[];
+};
+export type MarkdownBalloonFeatureInfoViewProps = import("./balloonFeatureInfoView.js").BalloonFeatureInfoViewProps & {
+    html: string;
+};
+/**
+ * @typedef {import("./balloonFeatureInfoView.js").BalloonFeatureInfoViewOptions & { template: string | string[] }} MarkdownBalloonFeatureInfoViewOptions
+ * @property {string | string[]} template - a string or an array of strings which will be concatenated using \n
+ */
+/**
+ * @typedef {import("./balloonFeatureInfoView.js").BalloonFeatureInfoViewProps & { html: string }} MarkdownBalloonFeatureInfoViewProps
+ */
+/**
+ * @class
+ * @description A markdown Balloon Featureinfo
+ * @extends {BalloonFeatureInfoView}
+ */
+declare class MarkdownBalloonFeatureInfoView extends BalloonFeatureInfoView {
+    /**
+     * @param {MarkdownBalloonFeatureInfoViewOptions} options
+     */
+    constructor(options: MarkdownBalloonFeatureInfoViewOptions);
+    /**
+     * @type {string | string[]}
+     */
+    template: string | string[];
+    /**
+     * @param {Record<string, unknown>} attributes
+     * @protected
+     * @returns {string}
+     */
+    protected _renderTemplate(attributes: Record<string, unknown>): string;
+    /**
+     * Variables wrapped in `${}` within `src` are replaced by their values, e.g. `${featureId}` or `${attributes.gml:name}`
+     * @param {import("./featureInfo.js").FeatureInfoEvent} featureInfo
+     * @param {import("@vcmap/core").Layer} layer
+     * @returns {MarkdownBalloonFeatureInfoViewProps}
+     */
+    getProperties(featureInfo: import("./featureInfo.js").FeatureInfoEvent, layer: import("@vcmap/core").Layer): MarkdownBalloonFeatureInfoViewProps;
+    /**
+     * @returns {MarkdownBalloonFeatureInfoViewOptions}
+     */
+    toJSON(): MarkdownBalloonFeatureInfoViewOptions;
+}
+import BalloonFeatureInfoView from './balloonFeatureInfoView.js';

package/src/featureInfo/markdownBalloonFeatureInfoView.js

@@ -0,0 +1,81 @@
+import {
+  parseAndSanitizeMarkdown,
+  replaceAttributes,
+} from '../application/markdownHelper.js';
+import BalloonFeatureInfoView from './balloonFeatureInfoView.js';
+import MarkdownBalloonComponent from './MarkdownBalloonComponent.vue';
+
+/**
+ * @typedef {import("./balloonFeatureInfoView.js").BalloonFeatureInfoViewOptions & { template: string | string[] }} MarkdownBalloonFeatureInfoViewOptions
+ * @property {string | string[]} template - a string or an array of strings which will be concatenated using \n
+ */
+
+/**
+ * @typedef {import("./balloonFeatureInfoView.js").BalloonFeatureInfoViewProps & { html: string }} MarkdownBalloonFeatureInfoViewProps
+ */
+
+/**
+ * @class
+ * @description A markdown Balloon Featureinfo
+ * @extends {BalloonFeatureInfoView}
+ */
+class MarkdownBalloonFeatureInfoView extends BalloonFeatureInfoView {
+  /**
+   * @type {string}
+   */
+  static get className() {
+    return 'MarkdownBalloonFeatureInfoView';
+  }
+
+  /**
+   * @param {MarkdownBalloonFeatureInfoViewOptions} options
+   */
+  constructor(options) {
+    super(options, MarkdownBalloonComponent);
+
+    /**
+     * @type {string | string[]}
+     */
+    this.template = Array.isArray(options.template)
+      ? options.template.slice()
+      : options.template;
+  }
+
+  /**
+   * @param {Record<string, unknown>} attributes
+   * @protected
+   * @returns {string}
+   */
+  _renderTemplate(attributes) {
+    return replaceAttributes(this.template, attributes);
+  }
+
+  /**
+   * Variables wrapped in `${}` within `src` are replaced by their values, e.g. `${featureId}` or `${attributes.gml:name}`
+   * @param {import("./featureInfo.js").FeatureInfoEvent} featureInfo
+   * @param {import("@vcmap/core").Layer} layer
+   * @returns {MarkdownBalloonFeatureInfoViewProps}
+   */
+  getProperties(featureInfo, layer) {
+    const properties = super.getProperties(featureInfo, layer);
+    return {
+      ...properties,
+      html: parseAndSanitizeMarkdown(
+        this._renderTemplate({ ...properties, ...properties.attributes }),
+      ),
+    };
+  }
+
+  /**
+   * @returns {MarkdownBalloonFeatureInfoViewOptions}
+   */
+  toJSON() {
+    const config = super.toJSON();
+    config.template = Array.isArray(this.template)
+      ? this.template.slice()
+      : this.template;
+    return config;
+  }
+}
+
+export default MarkdownBalloonFeatureInfoView;

package/src/featureInfo/markdownFeatureInfoView.d.ts

@@ -0,0 +1,47 @@
+export default MarkdownFeatureInfoView;
+export type MarkdownFeatureInfoViewOptions = import("./abstractFeatureInfoView.js").FeatureInfoViewOptions & {
+    template: string | string[];
+};
+export type MarkdownFeatureInfoViewProps = import("./abstractFeatureInfoView.js").FeatureInfoProps & {
+    html: 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
+ */
+/**
+ * @class
+ * @description A simple markdown feature info view. will render feature attributes into the markdown and replace {{}}
+ * @extends {AbstractFeatureInfoView}
+ */
+declare class MarkdownFeatureInfoView extends AbstractFeatureInfoView {
+    /**
+     * @param {MarkdownFeatureInfoViewOptions} options
+     */
+    constructor(options: MarkdownFeatureInfoViewOptions);
+    /**
+     * @type {string | string[]}
+     */
+    template: string | string[];
+    /**
+     * @param {Record<string, unknown>} attributes
+     * @protected
+     * @returns {string}
+     */
+    protected _renderTemplate(attributes: Record<string, unknown>): string;
+    /**
+     * Variables wrapped in `${}` within `src` are replaced by their values, e.g. `${featureId}` or `${attributes.gml:name}`
+     * @param {import("./featureInfo.js").FeatureInfoEvent} featureInfo
+     * @param {import("@vcmap/core").Layer} layer
+     * @returns {MarkdownFeatureInfoViewProps}
+     */
+    getProperties(featureInfo: import("./featureInfo.js").FeatureInfoEvent, layer: import("@vcmap/core").Layer): MarkdownFeatureInfoViewProps;
+    /**
+     * @returns {MarkdownFeatureInfoViewOptions}
+     */
+    toJSON(): MarkdownFeatureInfoViewOptions;
+}
+import AbstractFeatureInfoView from './abstractFeatureInfoView.js';