@vcmap/ui 6.0.0-rc.1 → 6.0.0-rc.10

package/src/featureInfo/abstractFeatureInfoView.js

@@ -1,7 +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';
+import { renderTemplate } from '../components/form-output/markdownHelper.js';
 
 /**
  * @typedef {Object} FeatureInfoProps
@@ -24,13 +24,13 @@ import { replaceAttributes } from '../application/markdownHelper.js';
  *   keyMapping?: Record<string,string>,
  *   valueMapping?: Record<string, string|Record<string,string>>,
  *   tags?: Record<string, HTMLTagOptions>,
- *   window?: import("../manager/window/windowManager.js").WindowComponentOptions
+ *   window?: Pick<import("../manager/window/windowManager.js").WindowComponentOptions,'state'|'slot'|'position'>
  * }} FeatureInfoViewOptions
  * @property {Array<string>} [attributeKeys] - list of keys to filter attributes of selected feature
  * @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. headerTitle of window state can be a template string, e.g. "{{myAttribute}}" or ["{{layerName}}", " - ", "{{myAttribute}}"]
+ * @property {Pick<import("../manager/window/windowManager.js").WindowComponentOptions,'state'|'slot'|'position'>} [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}}"]
  */
 
 /**
@@ -221,6 +221,21 @@ export function applyOlcsAttributeFilter(attributes, keys = []) {
     }, {});
 }
 
+/**
+ * Filters all __ attributes (from vc-converter tilesets) not provided as keys
+ * @param {Object<string, unknown>} attributes
+ * @param {Array<string>} keys
+ * @returns {Object}
+ */
+export function applyDoubleUnderscoreFilter(attributes, keys = []) {
+  return Object.keys(attributes)
+    .filter((key) => keys.includes(key) || !/^__/.test(key))
+    .reduce((obj, key) => {
+      obj[key] = attributes[key];
+      return obj;
+    }, {});
+}
+
 /**
  * Filters attributes having an empty object as value
  * @param {Object<string, unknown>} attributes
@@ -251,11 +266,9 @@ function getWindowState(app, state, attributes) {
   let headerTitle = state?.headerTitle;
   if (headerTitle) {
     if (Array.isArray(headerTitle)) {
-      headerTitle = headerTitle.map((item) =>
-        replaceAttributes(item, attributes),
-      );
+      headerTitle = headerTitle.map((item) => renderTemplate(item, attributes));
     } else {
-      headerTitle = replaceAttributes(headerTitle, attributes);
+      headerTitle = renderTemplate(headerTitle, attributes);
     }
   }
   return {
@@ -316,7 +329,7 @@ class AbstractFeatureInfoView extends VcsObject {
      */
     this.tags = options.tags || defaultOptions.tags;
     /**
-     * @type {import("../manager/window/windowManager.js").WindowComponentOptions|Object}
+     * @type {Pick<import("../manager/window/windowManager.js").WindowComponentOptions,'state'|'slot'|'position'>|Object}
      * @private
      */
     this._window = options.window || defaultOptions.window;
@@ -329,7 +342,7 @@ class AbstractFeatureInfoView extends VcsObject {
 
   /**
    * window options, configured in a module, used only internally by AbstractFeatureInfoView or subclass
-   * @type {import("../manager/window/windowManager.js").WindowComponentOptions|Object}
+   * @type {Pick<import("../manager/window/windowManager.js").WindowComponentOptions<FeatureInfoProps>,'state'|'slot'|'position'>|Object}
    */
   get window() {
     return this._window;
@@ -343,6 +356,16 @@ class AbstractFeatureInfoView extends VcsObject {
     return this._component;
   }
 
+  /**
+   * @param {undefined|import("ol").Feature|import("@vcmap-cesium/engine").Cesium3DTileFeature|import("@vcmap-cesium/engine").Cesium3DTilePointFeature} feature
+   * @returns {Object}
+   * @protected
+   */
+  // eslint-disable-next-line class-methods-use-this
+  _getAttributesFromFeature(feature) {
+    return feature?.getAttributes() || {};
+  }
+
   /**
    * This method returns all relevant attributes for this view.
    * Called by `getProperties()` to pass attributes as props object to the VueComponent of this view.
@@ -352,7 +375,7 @@ class AbstractFeatureInfoView extends VcsObject {
    * @returns {Object}
    */
   getAttributes(feature) {
-    let attributes = feature.getProperty('attributes') || {};
+    let attributes = this._getAttributesFromFeature(feature);
     if (this.attributeKeys.length > 0) {
       attributes = applyAttributeFilter(attributes, this.attributeKeys);
     }
@@ -363,6 +386,7 @@ class AbstractFeatureInfoView extends VcsObject {
       applyKeyMapping(attributes, this.keyMapping);
     }
     attributes = applyOlcsAttributeFilter(attributes, this.attributeKeys);
+    attributes = applyDoubleUnderscoreFilter(attributes, this.attributeKeys);
     return applyEmptyAttributesFilter(attributes);
   }
 
@@ -375,7 +399,7 @@ class AbstractFeatureInfoView extends VcsObject {
    */
   getTags(feature) {
     if (this.tags) {
-      const attributes = feature.getProperty('attributes') || {};
+      const attributes = this._getAttributesFromFeature(feature);
       const tags = Object.keys(this.tags)
         .filter(
           (key) =>
@@ -422,15 +446,16 @@ class AbstractFeatureInfoView extends VcsObject {
    * @returns {import("../manager/window/windowManager.js").WindowComponentOptions}
    */
   getWindowComponentOptions(app, featureInfo, layer) {
+    const props = this.getProperties(featureInfo, layer);
     return {
       state: getWindowState(app, this.window.state, {
-        ...this.getAttributes(featureInfo.feature),
+        ...props.attributes,
         layerName: layer.properties?.title || layer.name,
       }),
       slot: this.window.slot ?? WindowSlot.DYNAMIC_RIGHT,
       component: this.component,
       position: this.window.position,
-      props: this.getProperties(featureInfo, layer),
+      props,
     };
   }
 

package/src/featureInfo/balloonHelper.js

@@ -28,7 +28,7 @@ export const balloonOffset = { x: 55, y: 25 };
  * @returns {undefined|import("@vcmap-cesium/engine").Cartesian2}
  */
 function getBalloonPositionCesium(scene, cartesian) {
-  return SceneTransforms.wgs84ToWindowCoordinates(scene, cartesian);
+  return SceneTransforms.worldToWindowCoordinates(scene, cartesian);
 }
 
 /**

package/src/featureInfo/featureInfo.d.ts

@@ -11,14 +11,9 @@ export function getHighlightStyle(feature: FeatureType, layer: import("@vcmap/co
  */
 export function createFeatureInfoSession(app: import("../vcsUiApp.js").default): FeatureInfoSession;
 /**
- * @typedef {Object} FeatureInfoSession
- * @property {VcsEvent<void>} stopped
- * @property {function():void} stop
- */
-/**
- * @type {ClassRegistry<import("@vcmap/core").Ctor<typeof AbstractFeatureInfoView>>}
+ * @type {ClassRegistry<typeof AbstractFeatureInfoView>}
  */
-export const featureInfoClassRegistry: ClassRegistry<import("@vcmap/core").Ctor<typeof AbstractFeatureInfoView>>;
+export const featureInfoClassRegistry: ClassRegistry<typeof AbstractFeatureInfoView>;
 /**
  * Symbol added to features to overwrite the layers predefined feature info
  * @type {symbol}
@@ -43,6 +38,11 @@ export type FeatureInfoSession = {
 };
 import { ClassRegistry } from '@vcmap/core';
 import AbstractFeatureInfoView from './abstractFeatureInfoView.js';
+/**
+ * @typedef {Object} FeatureInfoSession
+ * @property {VcsEvent<void>} stopped
+ * @property {function():void} stop
+ */
 /**
  * @class FeatureInfo
  * @description Provides registration of featureInfoClasses and stores featureInfoView instances.

package/src/featureInfo/featureInfo.js

@@ -21,8 +21,9 @@ import {
   Entity,
 } from '@vcmap-cesium/engine';
 import { Feature } from 'ol';
-import { check, checkMaybe } from '@vcsuite/check';
+import { check, maybe, oneOf } from '@vcsuite/check';
 
+import { reactive } from 'vue';
 import { vcsAppSymbol } from '../pluginHelper.js';
 import FeatureInfoInteraction from './featureInfoInteraction.js';
 import AbstractFeatureInfoView from './abstractFeatureInfoView.js';
@@ -52,6 +53,17 @@ function getLogger() {
   return getLoggerByName('featureInfo');
 }
 
+/**
+ * @type {ClassRegistry<typeof AbstractFeatureInfoView>}
+ */
+export const featureInfoClassRegistry = new ClassRegistry();
+
+/**
+ * Symbol added to features to overwrite the layers predefined feature info
+ * @type {symbol}
+ */
+export const featureInfoViewSymbol = Symbol('featureInfoView');
+
 /**
  * @param {FeatureType} feature
  * @param {import("@vcmap/core").Layer} layer
@@ -133,7 +145,7 @@ function setupFeatureInfoTool(app) {
   /** @type {FeatureInfoSession|null} */
   let session = null;
 
-  const action = {
+  const action = reactive({
     name: 'featureInfoToggle',
     title: 'featureInfo.activateToolTitle',
     icon: '$vcsInfo',
@@ -144,46 +156,65 @@ function setupFeatureInfoTool(app) {
       } else {
         session = createFeatureInfoSession(app);
         session.stopped.addEventListener(() => {
-          this.active = false;
+          action.active = false;
           session = null;
           app.featureInfo.clear();
-          this.title = 'featureInfo.activateToolTitle';
+          action.title = 'featureInfo.activateToolTitle';
         });
         this.active = true;
-        this.title = 'featureInfo.deactivateToolTitle';
+        action.title = 'featureInfo.deactivateToolTitle';
       }
     },
-  };
+  });
 
   function addFeatureInfoButton() {
     if (app.uiConfig.getByKey('startingFeatureInfo')?.value !== false) {
       action.callback();
     }
-    app.toolboxManager.add(
-      {
-        id: 'featureInfo',
-        type: ToolboxType.SINGLE,
-        action,
-      },
-      vcsAppSymbol,
-    );
+    if (!app.toolboxManager.has('featureInfo')) {
+      app.toolboxManager.add(
+        {
+          id: 'featureInfo',
+          type: ToolboxType.SINGLE,
+          action,
+        },
+        vcsAppSymbol,
+      );
+    }
   }
 
-  if ([...app.layers].some((l) => l.properties?.featureInfo)) {
+  if (
+    [...app.layers].some((l) => l.properties?.featureInfo) ||
+    app.search.resultLayer.getFeatures().some((f) => !!f[featureInfoViewSymbol])
+  ) {
     addFeatureInfoButton();
   }
 
   const listeners = [
     app.layers.added.addEventListener((layer) => {
-      if (
-        layer?.properties?.featureInfo &&
-        !app.toolboxManager.has('featureInfo')
-      ) {
+      if (layer?.properties?.featureInfo) {
         addFeatureInfoButton();
       }
     }),
     app.layers.removed.addEventListener(() => {
       if (
+        ![...app.layers].some((l) => l.properties?.featureInfo) &&
+        !app.search.resultLayer
+          .getFeatures()
+          .some((f) => !!f[featureInfoViewSymbol]) &&
+        app.toolboxManager.has('featureInfo')
+      ) {
+        app.toolboxManager.remove('featureInfo');
+      }
+    }),
+    app.search.resultsChanged.addEventListener(() => {
+      if (
+        app.search.resultLayer
+          .getFeatures()
+          .some((f) => !!f[featureInfoViewSymbol])
+      ) {
+        addFeatureInfoButton();
+      } else if (
         ![...app.layers].some((l) => l.properties?.featureInfo) &&
         app.toolboxManager.has('featureInfo')
       ) {
@@ -207,17 +238,6 @@ function setupFeatureInfoTool(app) {
  * @property {function():void} stop
  */
 
-/**
- * @type {ClassRegistry<import("@vcmap/core").Ctor<typeof AbstractFeatureInfoView>>}
- */
-export const featureInfoClassRegistry = new ClassRegistry();
-
-/**
- * Symbol added to features to overwrite the layers predefined feature info
- * @type {symbol}
- */
-export const featureInfoViewSymbol = Symbol('featureInfoView');
-
 /**
  * @class FeatureInfo
  * @description Provides registration of featureInfoClasses and stores featureInfoView instances.
@@ -390,15 +410,13 @@ class FeatureInfo extends Collection {
    * @returns {Promise<void>}
    */
   async selectFeature(feature, position, windowPosition, featureInfoView) {
-    check(feature, [
-      Feature,
-      Entity,
-      Cesium3DTileFeature,
-      Cesium3DTilePointFeature,
-    ]);
-    checkMaybe(position, [Number]);
-    checkMaybe(windowPosition, [Number]);
-    checkMaybe(featureInfoView, AbstractFeatureInfoView);
+    check(
+      feature,
+      oneOf(Feature, Entity, Cesium3DTileFeature, Cesium3DTilePointFeature),
+    );
+    check(position, maybe([Number]));
+    check(windowPosition, maybe([Number]));
+    check(featureInfoView, maybe(AbstractFeatureInfoView));
 
     const usedFeatureInfoView =
       feature[featureInfoViewSymbol] ??
@@ -416,7 +434,7 @@ class FeatureInfo extends Collection {
           [featureId]: getHighlightStyle(
             feature,
             layer,
-            this._app.uiConfig.config.value.primaryColor ??
+            this._app.uiConfig.config.primaryColor ??
               getDefaultPrimaryColor(this._app),
           ),
         });
@@ -428,7 +446,7 @@ class FeatureInfo extends Collection {
           [featureId]: getHighlightStyle(
             feature,
             layer,
-            this._app.uiConfig.config.value.primaryColor ??
+            this._app.uiConfig.config.primaryColor ??
               getDefaultPrimaryColor(this._app),
           ),
         });

package/src/featureInfo/iframeFeatureInfoView.d.ts

@@ -9,7 +9,7 @@ export type IframeFeatureInfoViewProps = any & {
 };
 /**
  * @typedef {import("./abstractFeatureInfoView.js").FeatureInfoViewOptions & { src: string, title?: string }} IframeFeatureInfoViewOptions
- * @property {string} src - Specifies the address of the document to embed in the <iframe>. Variables wrapped in `${}` are replaced by their values, e.g. `${featureId}` or `${attributes.gml:name}`
+ * @property {string} src - Specifies the address of the document to embed in the <iframe>. Variables wrapped in `${}` are replaced by their values, e.g. `${featureId}` or `${gml:name}`
  * @property {string} [title] - optional title for the <iframe>
  */
 /**
@@ -34,7 +34,13 @@ declare class IframeFeatureInfoView extends AbstractFeatureInfoView {
      */
     title: string | undefined;
     /**
-     * Variables wrapped in `${}` within `src` are replaced by their values, e.g. `${featureId}` or `${attributes.gml:name}`
+     * @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 URL
      * @param {import("./featureInfo.js").FeatureInfoEvent} featureInfo
      * @param {import("@vcmap/core").Layer} layer
      * @returns {IframeFeatureInfoViewProps}

package/src/featureInfo/iframeFeatureInfoView.js

@@ -1,9 +1,10 @@
+import { renderTemplate } from '../components/form-output/markdownHelper.js';
 import AbstractFeatureInfoView from './abstractFeatureInfoView.js';
 import IframeComponent from './IframeComponent.vue';
 
 /**
  * @typedef {import("./abstractFeatureInfoView.js").FeatureInfoViewOptions & { src: string, title?: string }} IframeFeatureInfoViewOptions
- * @property {string} src - Specifies the address of the document to embed in the <iframe>. Variables wrapped in `${}` are replaced by their values, e.g. `${featureId}` or `${attributes.gml:name}`
+ * @property {string} src - Specifies the address of the document to embed in the <iframe>. Variables wrapped in `${}` are replaced by their values, e.g. `${featureId}` or `${gml:name}`
  * @property {string} [title] - optional title for the <iframe>
  */
 
@@ -41,7 +42,16 @@ class IframeFeatureInfoView extends AbstractFeatureInfoView {
   }
 
   /**
-   * Variables wrapped in `${}` within `src` are replaced by their values, e.g. `${featureId}` or `${attributes.gml:name}`
+   * @param {Record<string, unknown>} attributes
+   * @protected
+   * @returns {string}
+   */
+  _renderTemplate(attributes) {
+    return renderTemplate(this.src, attributes);
+  }
+
+  /**
+   * Supports markdown templates (e.g. {{someProperty}}) and style expressions to derive a URL
    * @param {import("./featureInfo.js").FeatureInfoEvent} featureInfo
    * @param {import("@vcmap/core").Layer} layer
    * @returns {IframeFeatureInfoViewProps}
@@ -50,9 +60,9 @@ class IframeFeatureInfoView extends AbstractFeatureInfoView {
     const properties = super.getProperties(featureInfo, layer);
     return {
       ...properties,
-      src: this.src.replace(/\$\{(.*?)}/g, (match, token) => {
-        const variable = token.split('.');
-        return variable.reduce((obj, prop) => obj?.[prop], properties);
+      src: this._renderTemplate({
+        ...properties,
+        ...properties.attributes,
       }),
       title: this.title,
     };

package/src/featureInfo/markdownBalloonFeatureInfoView.d.ts

@@ -33,7 +33,7 @@ declare class MarkdownBalloonFeatureInfoView extends BalloonFeatureInfoView {
      */
     protected _renderTemplate(attributes: Record<string, unknown>): string;
     /**
-     * Variables wrapped in `${}` within `src` are replaced by their values, e.g. `${featureId}` or `${attributes.gml:name}`
+     * Supports markdown templates (e.g. {{someProperty}}) and style expressions to derive markdown rendering
      * @param {import("./featureInfo.js").FeatureInfoEvent} featureInfo
      * @param {import("@vcmap/core").Layer} layer
      * @returns {MarkdownBalloonFeatureInfoViewProps}

package/src/featureInfo/markdownBalloonFeatureInfoView.js

@@ -1,7 +1,7 @@
 import {
   parseAndSanitizeMarkdown,
-  replaceAttributes,
-} from '../application/markdownHelper.js';
+  renderTemplate,
+} from '../components/form-output/markdownHelper.js';
 import BalloonFeatureInfoView from './balloonFeatureInfoView.js';
 import MarkdownBalloonComponent from './MarkdownBalloonComponent.vue';
 
@@ -47,11 +47,11 @@ class MarkdownBalloonFeatureInfoView extends BalloonFeatureInfoView {
    * @returns {string}
    */
   _renderTemplate(attributes) {
-    return replaceAttributes(this.template, attributes);
+    return renderTemplate(this.template, attributes);
   }
 
   /**
-   * Variables wrapped in `${}` within `src` are replaced by their values, e.g. `${featureId}` or `${attributes.gml:name}`
+   * Supports markdown templates (e.g. {{someProperty}}) and style expressions to derive markdown rendering
    * @param {import("./featureInfo.js").FeatureInfoEvent} featureInfo
    * @param {import("@vcmap/core").Layer} layer
    * @returns {MarkdownBalloonFeatureInfoViewProps}
@@ -60,7 +60,7 @@ class MarkdownBalloonFeatureInfoView extends BalloonFeatureInfoView {
     const properties = super.getProperties(featureInfo, layer);
     return {
       ...properties,
-      html: parseAndSanitizeMarkdown(
+      content: parseAndSanitizeMarkdown(
         this._renderTemplate({ ...properties, ...properties.attributes }),
       ),
     };

package/src/featureInfo/markdownFeatureInfoView.d.ts

@@ -33,7 +33,7 @@ declare class MarkdownFeatureInfoView extends AbstractFeatureInfoView {
      */
     protected _renderTemplate(attributes: Record<string, unknown>): string;
     /**
-     * Variables wrapped in `${}` within `src` are replaced by their values, e.g. `${featureId}` or `${attributes.gml:name}`
+     * Supports markdown templates (e.g. {{someProperty}}) and style expressions to derive a markdown rendering
      * @param {import("./featureInfo.js").FeatureInfoEvent} featureInfo
      * @param {import("@vcmap/core").Layer} layer
      * @returns {MarkdownFeatureInfoViewProps}

package/src/featureInfo/markdownFeatureInfoView.js

@@ -1,9 +1,6 @@
+import { renderTemplate } from '../components/form-output/markdownHelper.js';
 import AbstractFeatureInfoView from './abstractFeatureInfoView.js';
-import {
-  parseAndSanitizeMarkdown,
-  replaceAttributes,
-} from '../application/markdownHelper.js';
-import MarkdownComponent from './MarkdownComponent.vue';
+import VcsMarkdown from '../components/form-output/VcsMarkdown.vue';
 
 /**
  * @typedef {import("./abstractFeatureInfoView.js").FeatureInfoViewOptions & { template: string | string[] }} MarkdownFeatureInfoViewOptions
@@ -31,7 +28,7 @@ class MarkdownFeatureInfoView extends AbstractFeatureInfoView {
    * @param {MarkdownFeatureInfoViewOptions} options
    */
   constructor(options) {
-    super(options, MarkdownComponent);
+    super(options, VcsMarkdown);
 
     /**
      * @type {string | string[]}
@@ -47,11 +44,11 @@ class MarkdownFeatureInfoView extends AbstractFeatureInfoView {
    * @returns {string}
    */
   _renderTemplate(attributes) {
-    return replaceAttributes(this.template, attributes);
+    return renderTemplate(this.template, attributes);
   }
 
   /**
-   * Variables wrapped in `${}` within `src` are replaced by their values, e.g. `${featureId}` or `${attributes.gml:name}`
+   * Supports markdown templates (e.g. {{someProperty}}) and style expressions to derive a markdown rendering
    * @param {import("./featureInfo.js").FeatureInfoEvent} featureInfo
    * @param {import("@vcmap/core").Layer} layer
    * @returns {MarkdownFeatureInfoViewProps}
@@ -60,9 +57,10 @@ class MarkdownFeatureInfoView extends AbstractFeatureInfoView {
     const properties = super.getProperties(featureInfo, layer);
     return {
       ...properties,
-      html: parseAndSanitizeMarkdown(
-        this._renderTemplate({ ...properties, ...properties.attributes }),
-      ),
+      content: this._renderTemplate({
+        ...properties,
+        ...properties.attributes,
+      }),
     };
   }
 

package/src/featureInfo/tableFeatureInfoView.js

@@ -79,6 +79,19 @@ class TableFeatureInfoView extends AbstractFeatureInfoView {
     this.searchbarPlaceholder = options.searchbarPlaceholder;
   }
 
+  /**
+   * @param {undefined|import("ol").Feature|import("@vcmap-cesium/engine").Cesium3DTileFeature|import("@vcmap-cesium/engine").Cesium3DTilePointFeature} feature
+   * @returns {Object}
+   * @private
+   */
+  _getAttributesFromFeature(feature) {
+    const attributes = super._getAttributesFromFeature(feature);
+    return {
+      ...attributes,
+      featureId: feature.getId(),
+    };
+  }
+
   /**
    * @param {import("./featureInfo.js").FeatureInfoEvent} featureInfo
    * @param {import("@vcmap/core").Layer} layer
@@ -92,10 +105,6 @@ class TableFeatureInfoView extends AbstractFeatureInfoView {
       itemsPerPageArray: this.itemsPerPageArray,
       showSearchbar: this.showSearchbar,
       searchbarPlaceholder: this.searchbarPlaceholder,
-      headers: [
-        { text: 'components.vcsTable.key', value: 'key', width: '128px' },
-        { text: 'components.vcsTable.value', value: 'value', width: '192px' },
-      ],
     };
   }