@vcmap/ui 6.0.0-rc.3 → 6.0.0-rc.6

package/src/components/vector-properties/VcsVectorPropertiesComponent.vue.d.ts

@@ -241,6 +241,7 @@ declare const _default: import("vue").DefineComponent<{
     storeyHeights: import("vue").ComputedRef<{}>;
     modelScale: import("vue").ComputedRef<{}>;
     dimensionsUpperCase: string[];
+    cid: string;
 }, any, {}, {
     computed: typeof import("@vue/reactivity").computed;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{

package/src/components/viewpoint/VcsViewpointComponent.vue

@@ -9,13 +9,13 @@
       <v-container class="py-0 px-1">
         <v-row no-gutters v-if="!hideName">
           <v-col cols="6">
-            <VcsLabel html-for="name" dense required>
+            <VcsLabel :html-for="`${cid}-name`" dense required>
               {{ $t('components.viewpoint.name') }}
             </VcsLabel>
           </v-col>
           <v-col>
             <VcsTextField
-              id="name"
+              :id="`${cid}-name`"
               clearable
               v-model="localValue.name"
               :rules="nameRules"
@@ -24,13 +24,13 @@
         </v-row>
         <v-row no-gutters v-if="!hideTitle">
           <v-col cols="6">
-            <VcsLabel html-for="title" dense>
+            <VcsLabel :html-for="`${cid}-title`" dense>
               {{ $t('components.viewpoint.title') }}
             </VcsLabel>
           </v-col>
           <v-col>
             <VcsTextField
-              id="title"
+              :id="`${cid}-title`"
               clearable
               :placeholder="$t('components.viewpoint.titlePlaceholder')"
               v-model="title"
@@ -40,7 +40,6 @@
         <v-row no-gutters v-if="!hideAnimate">
           <v-col cols="6">
             <VcsCheckbox
-              id="animate"
               label="components.viewpoint.animate"
               v-model="localValue.animate"
             />
@@ -48,7 +47,6 @@
           <v-col>
             <VcsTextField
               v-if="localValue.animate"
-              id="duration"
               clearable
               :hide-spin-buttons="true"
               type="number"
@@ -102,12 +100,13 @@
         <template v-if="!isCesiumMap">
           <v-row no-gutters>
             <v-col>
-              <VcsLabel html-for="distance" dense>
+              <VcsLabel :html-for="`${cid}-distance`" dense>
                 {{ $t('components.viewpoint.distance') }}
               </VcsLabel>
             </v-col>
             <v-col>
               <VcsTextField
+                :id="`${cid}-distance`"
                 :min="0"
                 :step="100"
                 prefix="d"
@@ -128,13 +127,13 @@
           <div v-for="key in ['heading', 'pitch', 'roll']" :key="key">
             <v-row no-gutters>
               <v-col cols="9">
-                <VcsLabel :html-for="key" dense>
+                <VcsLabel :html-for="`${cid}-${key}`" dense>
                   {{ $st(`components.viewpoint.${key}`) }}
                 </VcsLabel>
               </v-col>
               <v-col cols="3">
                 <VcsTextField
-                  :id="key"
+                  :id="`${cid}-${key}`"
                   :hide-spin-buttons="true"
                   type="number"
                   unit="°"
@@ -154,9 +153,9 @@
                   height="32"
                   hide-details
                   :step="0.1"
-                  v-model="localValue[key]"
-                  v-bind="hprSliderOptions[key]"
                   :disabled="editAction.active"
+                  v-bind="hprSliderOptions[key]"
+                  v-model="localValue[key]"
                   @update:model-value="gotoViewpoint"
                 />
               </v-col>
@@ -188,6 +187,7 @@
   import VcsCoordinate from '../form-inputs-controls/VcsCoordinate.vue';
   import VcsSlider from '../form-inputs-controls/VcsSlider.vue';
   import { useProxiedComplexModel } from '../modelHelper.js';
+  import { useComponentId } from '../composables.js';
 
   /**
    * Updates the localValue ref by keeping name and properties
@@ -489,6 +489,8 @@
         }
       }
 
+      const cid = useComponentId();
+
       return {
         isCesiumMap,
         localValue,
@@ -500,6 +502,7 @@
         hprSliderOptions,
         isFiniteNumber,
         isPositiveNumber,
+        cid,
       };
     },
   };

package/src/components/viewpoint/VcsViewpointComponent.vue.d.ts

@@ -79,6 +79,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     isFiniteNumber: typeof isFiniteNumber;
     isPositiveNumber: typeof isPositiveNumber;
+    cid: string;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: ObjectConstructor;

package/src/components/viewpoint/VcsViewpointEditor.vue

@@ -7,10 +7,10 @@
     v-bind="{ ...$attrs, ...$props }"
   >
     <VcsViewpointComponent
-      v-bind="$attrs"
-      v-model="localConfig"
       hide-name
       :name-rules="nameRules"
+      v-bind="$attrs"
+      v-model="localConfig"
     />
   </AbstractConfigEditor>
 </template>

package/src/contentTree/LayerTree.vue

@@ -3,8 +3,9 @@
     <VcsTreeview
       v-if="tree && tree.length"
       :items="tree"
-      v-model:opened="opened"
       :show-searchbar="true"
+      v-model:opened="open"
+      open-on-click
       :searchbar-placeholder="'content.search.placeholder'"
       item-children="visibleChildren"
     />
@@ -15,7 +16,7 @@
 </template>
 
 <script>
-  import { computed, inject, onMounted, reactive, watch } from 'vue';
+  import { inject, ref, watch } from 'vue';
   import { VSheet } from 'vuetify/components';
   import VcsTreeview from '../components/lists/VcsTreeview.vue';
 
@@ -35,7 +36,7 @@
     },
     setup(props) {
       const app = inject('vcsApp');
-      const open = app.contentTree.getTreeOpenState(props.windowState.id);
+      const open = ref(app.contentTree.getTreeOpenState(props.windowState.id));
       const tree = app.contentTree.getComputedVisibleTree(props.windowState.id);
 
       function getWithVisibleChildren(item) {
@@ -59,8 +60,7 @@
         tree,
         (value, oldValue) => {
           if (openStateMap.has(app.maps.activeMap?.name)) {
-            open.splice(0);
-            open.push(...openStateMap.get(app.maps.activeMap?.name));
+            open.value = openStateMap.get(app.maps.activeMap?.name);
           } else {
             const items = [...app.contentTree]
               .filter((i) => i.initOpen && i.getTreeViewItem().visible)
@@ -69,9 +69,9 @@
               ? oldValue.map(getWithVisibleChildren).flat()
               : [];
             const changed = items.filter(
-              (name) => !oldValues.includes(name) && !open.includes(name),
+              (name) => !oldValues.includes(name) && !open.value.includes(name),
             );
-            open.push(...changed);
+            open.value.push(...changed);
           }
         },
         { immediate: true },
@@ -79,31 +79,13 @@
 
       watch(open, () => {
         if (app.maps.activeMap) {
-          openStateMap.set(app.maps.activeMap.name, [...open]);
+          openStateMap.set(app.maps.activeMap.name, [...open.value]);
         }
       });
 
-      // the entire block, very ugly because of https://github.com/vuetifyjs/vuetify/issues/19414
-      const opened = reactive([]);
-      onMounted(() => {
-        opened.splice(0);
-        opened.push(...open);
-
-        watch(opened, () => {
-          open.splice(0);
-          open.push(...opened);
-        });
-      });
-
       return {
         tree,
-        opened: computed({
-          get: () => opened,
-          set: (value) => {
-            opened.splice(0);
-            opened.push(...value);
-          },
-        }),
+        open,
       };
     },
   };

package/src/contentTree/LayerTree.vue.d.ts

@@ -5,7 +5,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     tree: any;
-    opened: import("vue").WritableComputedRef<any[]>;
+    open: import("vue").Ref<any>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     windowState: {
         type: ObjectConstructor;

package/src/contentTree/contentTreeCollection.d.ts

@@ -62,6 +62,7 @@ declare class ContentTreeCollection extends IndexedCollection<ContentTreeItem> {
     private _suspendListeners;
     /**
      * @private
+     * @param {Array<string>} exclude
      */
     private _clearSubTrees;
     /**

package/src/contentTree/contentTreeCollection.js

@@ -53,6 +53,24 @@ class ContentTreeCollection extends IndexedCollection {
      */
     this._weightListeners = new Map();
 
+    const uiConfigChanged = () => {
+      this.subTreeViewItems.value.forEach((subTree) => {
+        if (
+          !this._app.uiConfig.config.hideContentTree &&
+          !this._subTreeListeners.has(subTree.name)
+        ) {
+          this._subTreeListeners.get(subTree.name)?.();
+          this._subTreeListeners.set(
+            subTree.name,
+            this._createSubtreeActionButton(subTree),
+          );
+        } else if (this._app.uiConfig.config.hideContentTree) {
+          this._subTreeListeners.get(subTree.name)?.();
+          this._subTreeListeners.delete(subTree.name);
+        }
+      });
+    };
+
     /**
      * @type {Array<function():void>}
      * @private
@@ -78,6 +96,8 @@ class ContentTreeCollection extends IndexedCollection {
         }
       }),
       this.moved.addEventListener(() => recreateTree(true)),
+      app.uiConfig.added.addEventListener(uiConfigChanged),
+      app.uiConfig.removed.addEventListener(uiConfigChanged),
     ];
     /**
      * This is the default content tree.
@@ -113,11 +133,19 @@ class ContentTreeCollection extends IndexedCollection {
 
   /**
    * @private
+   * @param {Array<string>} exclude
    */
-  _clearSubTrees() {
-    this._subTreeViewItems.value.clear();
-    [...this._subTreeListeners.values()].forEach((cb) => {
-      cb();
+  _clearSubTrees(exclude = []) {
+    this._subTreeViewItems.value.forEach((tree, key) => {
+      if (!exclude.includes(key)) {
+        this._subTreeViewItems.value.delete(key);
+      }
+    });
+    this._subTreeListeners.forEach((cb, key) => {
+      if (!exclude.includes(key)) {
+        cb();
+        this._subTreeListeners.delete(key);
+      }
     });
   }
 
@@ -159,7 +187,6 @@ class ContentTreeCollection extends IndexedCollection {
       vcsAppSymbol,
       ButtonLocation.CONTENT,
     );
-    this._subTreeViewItems.value.set(id, subTreeViewItem);
     return () => {
       app.windowManager.remove(id);
       app.navbarManager.remove(id);
@@ -228,14 +255,21 @@ class ContentTreeCollection extends IndexedCollection {
       defaultSubTreeViewItem,
       ...topLevelItems.filter((i) => i[subTreeSymbol]),
     ];
-
+    this._clearSubTrees(
+      subTrees.map((tree) => {
+        return tree.name;
+      }),
+    );
     subTrees.forEach((subTree) => {
       if (!this._app.navbarManager.has(subTree.name) || resetSubtreeButtons) {
-        this._subTreeListeners.get(subTree.name)?.();
-        this._subTreeListeners.set(
-          subTree.name,
-          this._createSubtreeActionButton(subTree),
-        );
+        this._subTreeViewItems.value.set(subTree.name, subTree);
+        if (!this._app.uiConfig.config.hideContentTree) {
+          this._subTreeListeners.get(subTree.name)?.();
+          this._subTreeListeners.set(
+            subTree.name,
+            this._createSubtreeActionButton(subTree),
+          );
+        }
       } else {
         const buttonComponent = this._app.navbarManager.get(subTree.name);
         if (buttonComponent.weight !== subTree[subTreeItemWeight]) {

package/src/contentTree/contentTreeItem.d.ts

@@ -1,7 +1,7 @@
 /**
- * @type {ClassRegistry<import("@vcmap/core").Ctor<typeof ContentTreeItem>>}
+ * @type {ClassRegistry<typeof ContentTreeItem>}
  */
-export const contentTreeClassRegistry: ClassRegistry<import("@vcmap/core").Ctor<typeof ContentTreeItem>>;
+export const contentTreeClassRegistry: ClassRegistry<typeof ContentTreeItem>;
 export default ContentTreeItem;
 export type ContentTreeItemOptions = {
     type?: string | undefined;

package/src/contentTree/contentTreeItem.js

@@ -47,7 +47,7 @@ import { executeCallbacks } from '../callback/vcsCallback.js';
 const actionWeightSymbol = Symbol('ActionWeight');
 
 /**
- * @type {ClassRegistry<import("@vcmap/core").Ctor<typeof ContentTreeItem>>}
+ * @type {ClassRegistry<typeof ContentTreeItem>}
  */
 export const contentTreeClassRegistry = new ClassRegistry();
 

package/src/featureInfo/BalloonComponent.vue

@@ -1,24 +1,32 @@
 <template>
   <v-card class="mx-auto elevation-0" v-if="position">
     <slot name="balloon-header" :attrs="{ ...$props, ...$attrs }">
-      <v-list-item class="px-2 align-center">
-        <template #prepend>
-          <v-icon color="primary" size="16" class="mr-2"> $vcsInfo </v-icon>
+      <v-list-item class="px-1">
+        <template #prepend="prependScope">
+          <slot name="prepend" v-bind="prependScope">
+            <div class="pl-1 pr-2">
+              <v-icon color="primary" :size="iconSize"> $vcsInfo </v-icon>
+            </div>
+          </slot>
+        </template>
+        <slot name="balloon-title" :attrs="{ ...$props, ...$attrs }">
+          <v-list-item-title>
+            <h3 class="font-weight-bold">
+              {{ $st(balloonTitle) }}
+            </h3>
+          </v-list-item-title>
+          <v-list-item-subtitle v-if="balloonSubtitle">
+            {{ $st(balloonSubtitle) }}
+          </v-list-item-subtitle>
+        </slot>
+        <template #append>
+          <VcsButton
+            @click.stop="close"
+            icon="mdi-close-thick"
+            tooltip="components.close"
+            class="px-1"
+          />
         </template>
-        <v-list-item-title>
-          <h3 class="font-weight-bold">
-            {{ $st(balloonTitle) }}
-          </h3>
-        </v-list-item-title>
-        <v-list-item-subtitle v-if="balloonSubtitle">
-          {{ $st(balloonSubtitle) }}
-        </v-list-item-subtitle>
-        <VcsButton
-          @click.stop="close"
-          icon="mdi-close-thick"
-          tooltip="components.close"
-          class="d-flex"
-        />
       </v-list-item>
     </slot>
 
@@ -69,6 +77,7 @@
   import { setupBalloonPositionListener } from './balloonHelper.js';
   import VcsButton from '../components/buttons/VcsButton.vue';
   import { getTag, getTagOptions } from '../components/tables/VcsTable.vue';
+  import { useIconSize } from '../vuePlugins/vuetify.js';
 
   /**
    * @description A balloon viewing feature attributes. Size dynamic dependent on number of attributes.
@@ -80,7 +89,9 @@
    * @vue-prop {Object} tags - optional object containing keys rendered as tags
    * @vue-prop {Array<import("ol/coordinate").Coordinate>} position - clicked position balloon is rendered at
    * @vue-data {slot} [#balloon-header] - slot to override balloon header, $props and $attrs are passed to `attrs`
+   * @vue-data {slot} [#balloon-title] - slot to override balloon title and subtitle, $props and $attrs are passed to `attrs`. Is overwritten by balloon-header slot.
    * @vue-data {slot} [#default] - slot to override balloon content, $props and $attrs are passed to `attrs`
+   * @vue-data {slot} [#prepend] - slot to override balloon header icon
    */
   export default {
     name: 'BalloonComponent',
@@ -182,8 +193,9 @@
         app.windowManager.remove(attrs['window-state'].id);
         destroyListener();
       };
-
+      const iconSize = useIconSize();
       return {
+        iconSize,
         close,
         getTag,
         getTagOptions,
@@ -194,8 +206,6 @@
 </script>
 
 <style lang="scss">
-  @import '../styles/shades.scss';
-
   .balloon {
     z-index: 0 !important;
   }
@@ -213,11 +223,8 @@
     width: 0;
     filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.3));
   }
-  .theme--light .balloon:after {
-    border-color: map-get($shades, 'white') transparent;
-  }
-  .theme--dark .balloon:after {
-    border-color: map-get($shades, 'black') transparent;
+  .balloon:after {
+    border-color: rgb(var(--v-theme-surface-light)) transparent;
   }
   .balloon .v-list-item .v-list-item__title,
   .balloon .v-list-item .v-list-item__subtitle {

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

@@ -24,6 +24,7 @@ declare const _default: import("vue").DefineComponent<{
         default: null;
     };
 }, {
+    iconSize: import("vue").ComputedRef<number>;
     close: () => void;
     getTag: typeof getTag;
     getTagOptions: typeof getTagOptions;

package/src/featureInfo/MarkdownBalloonComponent.vue

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

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

@@ -1,10 +1,10 @@
 declare const _default: import("vue").DefineComponent<{
-    html: {
+    content: {
         type: StringConstructor;
         required: true;
     };
 }, any, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    html: {
+    content: {
         type: StringConstructor;
         required: true;
     };

package/src/featureInfo/abstractFeatureInfoView.d.ts

@@ -103,7 +103,7 @@ export type FeatureInfoViewOptions = import("@vcmap/core").VcsObjectOptions & {
     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'>;
 };
 /**
  * Abstract class to be extended by FeatureInfoView classes
@@ -145,7 +145,7 @@ declare class AbstractFeatureInfoView extends VcsObject {
         [x: string]: HTMLTagOptions;
     };
     /**
-     * @type {import("../manager/window/windowManager.js").WindowComponentOptions|Object}
+     * @type {Pick<import("../manager/window/windowManager.js").WindowComponentOptions,'state'|'slot'|'position'>|Object}
      * @private
      */
     private _window;
@@ -156,14 +156,20 @@ declare class AbstractFeatureInfoView extends VcsObject {
     private _component;
     /**
      * 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(): Object | import("../manager/window/windowManager.js").WindowComponentOptions<Object>;
+    get window(): Object | Pick<import("../manager/window/windowManager.js").WindowComponentOptions<FeatureInfoProps>, "slot" | "state" | "position">;
     /**
      * component provided by a FeatureInfoView class, passed to featureInfo via `getWindowComponentOptions()`
      * @type {import("vue").Component<FeatureInfoProps, unknown, unknown>|undefined}
      */
     get component(): import("vue").Component<FeatureInfoProps, unknown, unknown, import("vue").ComputedOptions, import("vue").MethodOptions, {}, any> | undefined;
+    /**
+     * @param {undefined|import("ol").Feature|import("@vcmap-cesium/engine").Cesium3DTileFeature|import("@vcmap-cesium/engine").Cesium3DTilePointFeature} feature
+     * @returns {Object}
+     * @protected
+     */
+    protected _getAttributesFromFeature(feature: undefined | import("ol").Feature | import("@vcmap-cesium/engine").Cesium3DTileFeature | import("@vcmap-cesium/engine").Cesium3DTilePointFeature): Object;
     /**
      * This method returns all relevant attributes for this view.
      * Called by `getProperties()` to pass attributes as props object to the VueComponent of this view.

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}}"]
  */
 
 /**
@@ -251,11 +251,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 +314,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 +327,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 +341,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?.getProperty('attributes') || {};
+  }
+
   /**
    * 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 +360,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);
     }
@@ -375,7 +383,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) =>