@vcmap/ui 5.3.7 → 6.0.0-rc.10

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,8 +434,8 @@ class FeatureInfo extends Collection {
           [featureId]: getHighlightStyle(
             feature,
             layer,
-            this._app.uiConfig.config.value.primaryColor ??
-              getDefaultPrimaryColor(),
+            this._app.uiConfig.config.primaryColor ??
+              getDefaultPrimaryColor(this._app),
           ),
         });
         this._clearHighlightingCb = () =>
@@ -428,8 +446,8 @@ class FeatureInfo extends Collection {
           [featureId]: getHighlightStyle(
             feature,
             layer,
-            this._app.uiConfig.config.value.primaryColor ??
-              getDefaultPrimaryColor(),
+            this._app.uiConfig.config.primaryColor ??
+              getDefaultPrimaryColor(this._app),
           ),
         });
         this._clearHighlightingCb = () =>

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,23 +1,6 @@
+import { renderTemplate } from '../components/form-output/markdownHelper.js';
 import AbstractFeatureInfoView from './abstractFeatureInfoView.js';
-import {
-  parseAndSanitizeMarkdown,
-  replaceAttributes,
-} from '../application/markdownHelper.js';
-
-/**
- * @description A component to render markdown html
- * @vue-prop {string} html - the html to render
- */
-const MarkdownComponent = {
-  name: 'MarkdownComponent',
-  props: {
-    html: {
-      type: String,
-      required: true,
-    },
-  },
-  template: '<div class="pa-2" v-html="html" />',
-};
+import VcsMarkdown from '../components/form-output/VcsMarkdown.vue';
 
 /**
  * @typedef {import("./abstractFeatureInfoView.js").FeatureInfoViewOptions & { template: string | string[] }} MarkdownFeatureInfoViewOptions
@@ -45,7 +28,7 @@ class MarkdownFeatureInfoView extends AbstractFeatureInfoView {
    * @param {MarkdownFeatureInfoViewOptions} options
    */
   constructor(options) {
-    super(options, MarkdownComponent);
+    super(options, VcsMarkdown);
 
     /**
      * @type {string | string[]}
@@ -61,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}
@@ -74,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' },
-      ],
     };
   }
 

package/src/i18n/de.d.ts

@@ -1,5 +1,109 @@
 export default messages;
 declare namespace messages {
+    export let $vuetify: {
+        dataIterator: {
+            rowsPerPageText: string;
+            pageText: string;
+            noResultsText: string;
+            loadingText: string;
+        };
+        badge: string;
+        open: string;
+        close: string;
+        dismiss: string;
+        confirmEdit: {
+            ok: string;
+            cancel: string;
+        };
+        dataTable: {
+            itemsPerPageText: string;
+            ariaLabel: {
+                sortDescending: string;
+                sortAscending: string;
+                sortNone: string;
+                activateNone: string;
+                activateDescending: string;
+                activateAscending: string;
+            };
+            sortBy: string;
+        };
+        dataFooter: {
+            itemsPerPageText: string;
+            itemsPerPageAll: string;
+            nextPage: string;
+            prevPage: string;
+            firstPage: string;
+            lastPage: string;
+            pageText: string;
+        };
+        dateRangeInput: {
+            divider: string;
+        };
+        datePicker: {
+            itemsSelected: string;
+            range: {
+                title: string;
+                header: string;
+            };
+            title: string;
+            header: string;
+            input: {
+                placeholder: string;
+            };
+        };
+        noDataText: string;
+        carousel: {
+            prev: string;
+            next: string;
+            ariaLabel: {
+                delimiter: string;
+            };
+        };
+        calendar: {
+            moreEvents: string;
+            today: string;
+        };
+        input: {
+            clear: string;
+            prependAction: string;
+            appendAction: string;
+            otp: string;
+        };
+        fileInput: {
+            counter: string;
+            counterSize: string;
+        };
+        timePicker: {
+            am: string;
+            pm: string;
+            title: string;
+        };
+        pagination: {
+            ariaLabel: {
+                root: string;
+                next: string;
+                previous: string;
+                page: string;
+                currentPage: string;
+                first: string;
+                last: string;
+            };
+        };
+        stepper: {
+            next: string;
+            prev: string;
+        };
+        rating: {
+            ariaLabel: {
+                item: string;
+            };
+        };
+        loading: string;
+        infiniteScroll: {
+            loadMore: string;
+            empty: string;
+        };
+    };
     export namespace navbar {
         namespace maps {
             let CesiumMap: string;
@@ -210,6 +314,7 @@ declare namespace messages {
             export let invalid: string;
             export let editVertices: string;
             export let translate: string;
+            export let toggle: string;
         }
         export namespace editor {
             let translate_1: string;
@@ -234,8 +339,12 @@ declare namespace messages {
             export { header_1 as header };
             export let altitudeMode: string;
             export let clampToGround: string;
+            export let clampToTerrain: string;
+            export let clampTo3DTiles: string;
             export let absolute: string;
             export let relativeToGround: string;
+            export let relativeToTerrain: string;
+            export let relativeTo3DTiles: string;
             export let groundLevel: string;
             export let classificationType: string;
             export let none: string;
@@ -254,10 +363,28 @@ declare namespace messages {
             export let modelHeading: string;
             export let modelPitch: string;
             export let modelRoll: string;
+            export let modelAutoScale: string;
             export let baseUrl: string;
             export let extrudedHeight: string;
             export let skirt: string;
             export let modelScale: string;
+            export namespace help_1 {
+                let clampToGround_1: string;
+                export { clampToGround_1 as clampToGround };
+                let clampToTerrain_1: string;
+                export { clampToTerrain_1 as clampToTerrain };
+                let clampTo3DTiles_1: string;
+                export { clampTo3DTiles_1 as clampTo3DTiles };
+                let absolute_1: string;
+                export { absolute_1 as absolute };
+                let relativeToGround_1: string;
+                export { relativeToGround_1 as relativeToGround };
+                let relativeToTerrain_1: string;
+                export { relativeToTerrain_1 as relativeToTerrain };
+                let relativeTo3DTiles_1: string;
+                export { relativeTo3DTiles_1 as relativeTo3DTiles };
+            }
+            export { help_1 as help };
         }
         export namespace validation {
             let allowedRange: string;
@@ -287,13 +414,13 @@ declare namespace messages {
             export let light: string;
         }
     }
-    export namespace help_1 {
+    export namespace help_2 {
         let title_13: string;
         export { title_13 as title };
         let tooltip_4: string;
         export { tooltip_4 as tooltip };
     }
-    export { help_1 as help };
+    export { help_2 as help };
     export namespace featureInfo {
         let activateToolTitle: string;
         let deactivateToolTitle: string;

package/src/i18n/de.js

@@ -1,6 +1,14 @@
-import { TransformationMode } from '@vcmap/core';
+import { de } from 'vuetify/locale';
 
 const messages = {
+  $vuetify: {
+    ...de,
+    dataIterator: {
+      ...de.dataIterator,
+      rowsPerPageText: 'Elemente pro Seite:',
+      pageText: '{0}-{1} von {2}',
+    },
+  },
   navbar: {
     maps: {
       CesiumMap: '3D-Karte aktivieren',
@@ -193,12 +201,13 @@ const messages = {
       invalid: 'Koordinaten ergeben keine valide Ausdehnung!',
       editVertices: 'Ecken bearbeiten',
       translate: 'Ausdehnung verschieben',
+      toggle: 'Extent an-/ausschalten',
     },
     editor: {
-      [TransformationMode.TRANSLATE]: 'Objekt verschieben',
-      [TransformationMode.ROTATE]: 'Objekt rotieren',
-      [TransformationMode.SCALE]: 'Objekt skalieren',
-      [TransformationMode.EXTRUDE]: 'Objekt extrudieren',
+      translate: 'Objekt verschieben',
+      rotate: 'Objekt rotieren',
+      scale: 'Objekt skalieren',
+      extrude: 'Objekt extrudieren',
       header: 'Transformieren',
       placeOnTerrain: 'Auf Gelände plazieren',
       cw: '90° rechtsherum drehen',
@@ -213,9 +222,13 @@ const messages = {
     vectorProperties: {
       header: 'Vektor Eigenschaften',
       altitudeMode: 'Höhenmodus',
-      clampToGround: 'Auf Gelände legen',
+      clampToGround: 'Auf alle Oberflächen legen',
+      clampToTerrain: 'Auf Gelände legen',
+      clampTo3DTiles: 'Auf Objekte legen',
       absolute: 'Absolut',
-      relativeToGround: 'Relativ zum Gelände',
+      relativeToGround: 'Relativ zu allen Oberflächen',
+      relativeToTerrain: 'Relativ zum Gelände',
+      relativeTo3DTiles: 'Relativ zu Objekten',
       groundLevel: 'Geländehöhe',
       classificationType: 'Klassifizierung',
       none: 'Keine',
@@ -234,10 +247,24 @@ const messages = {
       modelHeading: 'Modell Ausrichtung',
       modelPitch: 'Modell Neigung',
       modelRoll: 'Modell Rotation',
+      modelAutoScale: 'Modellautoskalierung',
       baseUrl: 'Basis URL',
       extrudedHeight: 'Extrusion',
       skirt: 'Skirts',
       modelScale: 'Modell Skalierung',
+      help: {
+        clampToGround:
+          'Auf alle Oberflächen legen (wie z.B. Gelände, Mesh oder Gebäude)',
+        clampToTerrain: 'Nur aufs Gelände legen',
+        clampTo3DTiles: 'Nur auf Objekte legen (wie z.B. Mesh oder Gebäude)',
+        absolute:
+          'Jeden Stützpunkt in 3D darstellen. Nicht anwendbar für 2D Feature.',
+        relativeToGround:
+          'Relativ zu allen Oberflächen (wie z.B. Gelände, Mesh oder Gebäude)',
+        relativeToTerrain: 'Nur Relative zum Gelände.',
+        relativeTo3DTiles:
+          'Nur Relativ zu Objekten (wie z.B. Mesh oder Gebäude)',
+      },
     },
     validation: {
       allowedRange: 'Erlaubter Wertebereich',
@@ -252,9 +279,9 @@ const messages = {
     displayQuality: {
       title: 'Anzeigequalität',
       level: {
-        low: 'Niedrige',
-        medium: 'Mittlere',
-        high: 'Hohe',
+        low: 'Niedrig',
+        medium: 'Mittel',
+        high: 'Hoch',
       },
     },
     theme: {