@vcmap/ui 6.0.0-rc.5 → 6.0.0-rc.7

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

@@ -9,50 +9,44 @@
       <template v-if="show3DProperties">
         <v-row v-if="visibleProperties.has('altitudeMode')" no-gutters>
           <v-col>
-            <VcsLabel html-for="vp-altitude-mode">{{
+            <VcsLabel :html-for="`${cid}-vp-altitude-mode`">{{
               $t('components.vectorProperties.altitudeMode')
             }}</VcsLabel>
           </v-col>
           <v-col>
             <VcsSelect
-              id="vp-altitude-mode"
+              :id="`${cid}-vp-altitude-mode`"
               :items="availableAltitudeModes"
               v-model="localValue.altitudeMode"
             />
           </v-col>
         </v-row>
-        <v-row
-          v-if="
-            visibleProperties.has('heightAboveGround') &&
-            localValue.altitudeMode === 'relativeToGround'
-          "
-          no-gutters
-        >
+        <v-row v-if="visibleProperties.has('heightAboveGround')" no-gutters>
           <v-col>
-            <VcsLabel html-for="vp-height-above-ground">{{
+            <VcsLabel :html-for="`${cid}-vp-height-above-ground`">{{
               $t('components.vectorProperties.heightAboveGround')
             }}</VcsLabel>
           </v-col>
           <v-col>
             <VcsTextField
-              id="vp-height-above-ground"
+              :id="`${cid}-vp-height-above-ground`"
               v-model.number="localValue.heightAboveGround"
               :hide-spin-buttons="true"
               type="number"
               unit="m"
-              placeholder="0"
+              clearable
             />
           </v-col>
         </v-row>
         <v-row v-if="visibleProperties.has('groundLevel')" no-gutters>
           <v-col>
-            <VcsLabel html-for="vp-ground-level">{{
+            <VcsLabel :html-for="`${cid}-vp-ground-level`">{{
               $t('components.vectorProperties.groundLevel')
             }}</VcsLabel>
           </v-col>
           <v-col>
             <VcsTextField
-              id="vp-ground-level"
+              :id="`${cid}-vp-ground-level`"
               v-model.number="localValue.groundLevel"
               :hide-spin-buttons="true"
               type="number"
@@ -142,13 +136,13 @@
         no-gutters
       >
         <v-col>
-          <VcsLabel html-for="vp-classification-type">
+          <VcsLabel :html-for="`${cid}-vp-classification-type`">
             {{ $t('components.vectorProperties.classificationType') }}
           </VcsLabel>
         </v-col>
         <v-col>
           <VcsSelect
-            id="vp-classification-type"
+            :id="`${cid}-vp-classification-type`"
             :items="availableClassificationTypes"
             v-model="classificationType"
           />
@@ -186,7 +180,7 @@
         <v-row v-if="visibleProperties.has('extrudedHeight')" no-gutters>
           <v-col>
             <VcsLabel
-              html-for="vp-extruded-height"
+              :html-for="`${cid}-vp-extruded-height`"
               :class="{
                 'px-4':
                   visibleProperties.has('storeysAboveGround') ||
@@ -197,7 +191,7 @@
           </v-col>
           <v-col>
             <VcsTextField
-              id="vp-extruded-height"
+              :id="`${cid}-vp-extruded-height`"
               v-model.number="localValue.extrudedHeight"
               :hide-spin-buttons="true"
               type="number"
@@ -212,13 +206,13 @@
         </v-row>
         <v-row v-if="visibleProperties.has('storeysAboveGround')" no-gutters>
           <v-col>
-            <VcsLabel html-for="vp-storeys-above" class="px-4">{{
+            <VcsLabel :html-for="`${cid}-vp-storeys-above`" class="px-4">{{
               $t('components.vectorProperties.storeys')
             }}</VcsLabel>
           </v-col>
           <v-col>
             <VcsTextField
-              id="vp-storeys-above"
+              :id="`${cid}-vp-storeys-above`"
               v-model.number="localValue.storeysAboveGround"
               :hide-spin-buttons="true"
               type="number"
@@ -235,13 +229,15 @@
           no-gutters
         >
           <v-col>
-            <VcsLabel :html-for="'vp-storey-heights-above'" class="px-4">{{
-              $t('components.vectorProperties.storeyHeights')
-            }}</VcsLabel>
+            <VcsLabel
+              :html-for="`${cid}-vp-storey-heights-above`"
+              class="px-4"
+              >{{ $t('components.vectorProperties.storeyHeights') }}</VcsLabel
+            >
           </v-col>
           <v-col>
             <VcsChipArrayInput
-              id="vp-storey-heights-above"
+              :id="`${cid}-vp-storey-heights-above`"
               column
               type="number"
               v-model="storeyHeights.storeyHeightsAboveGround.value"
@@ -266,7 +262,7 @@
         <v-row v-if="visibleProperties.has('skirt')" no-gutters>
           <v-col>
             <VcsLabel
-              html-for="vp-skirt"
+              :html-for="`${cid}-vp-skirt`"
               :class="{
                 'px-4':
                   visibleProperties.has('storeysBelowGround') ||
@@ -277,7 +273,7 @@
           </v-col>
           <v-col>
             <VcsTextField
-              id="vp-skirt"
+              :id="`${cid}-vp-skirt`"
               v-model.number="localValue.skirt"
               :hide-spin-buttons="true"
               type="number"
@@ -292,13 +288,13 @@
         </v-row>
         <v-row v-if="visibleProperties.has('storeysBelowGround')" no-gutters>
           <v-col>
-            <VcsLabel html-for="vp-storeys-below" class="px-4">{{
+            <VcsLabel :html-for="`${cid}-vp-storeys-below`" class="px-4">{{
               $t('components.vectorProperties.storeys')
             }}</VcsLabel>
           </v-col>
           <v-col>
             <VcsTextField
-              id="vp-storeys-below"
+              :id="`${cid}-vp-storeys-below`"
               v-model.number="localValue.storeysBelowGround"
               :hide-spin-buttons="true"
               type="number"
@@ -315,13 +311,15 @@
           no-gutters
         >
           <v-col>
-            <VcsLabel :html-for="'vp-storey-heights-below'" class="px-4">{{
-              $t('components.vectorProperties.storeyHeights')
-            }}</VcsLabel>
+            <VcsLabel
+              :html-for="`${cid}-vp-storey-heights-below`"
+              class="px-4"
+              >{{ $t('components.vectorProperties.storeyHeights') }}</VcsLabel
+            >
           </v-col>
           <v-col>
             <VcsChipArrayInput
-              :id="'vp-storey-heights-below'"
+              :id="`${cid}-vp-storey-heights-below`"
               column
               type="number"
               v-model="storeyHeights.storeyHeightsBelowGround.value"
@@ -341,6 +339,7 @@
             'modelHeading',
             'modelPitch',
             'modelRoll',
+            'modelAutoScale',
             'baseUrl',
           ].some((prop) => visibleProperties.has(prop))
         "
@@ -348,13 +347,13 @@
       <v-container class="px-1 py-0">
         <v-row v-if="visibleProperties.has('modelUrl')" no-gutters>
           <v-col>
-            <VcsLabel html-for="vp-model-url">
+            <VcsLabel :html-for="`${cid}-vp-model-url`">
               {{ $t('components.vectorProperties.modelUrl') }}
             </VcsLabel>
           </v-col>
           <v-col>
             <VcsTextField
-              id="vp-model-url"
+              :id="`${cid}-vp-model-url`"
               v-model="localValue.modelUrl"
               clearable
               :placeholder="'modelUrl' in localValue ? 'example.glb' : ''"
@@ -384,12 +383,13 @@
         </template>
         <v-row v-if="visibleProperties.has('modelHeading')" no-gutters>
           <v-col cols="6">
-            <VcsLabel>{{
+            <VcsLabel :html-for="`${cid}-vp-model-heading`">{{
               $t('components.vectorProperties.modelHeading')
             }}</VcsLabel>
           </v-col>
           <v-col>
             <VcsTextField
+              :id="`${cid}-vp-model-heading`"
               v-model.number="localValue.modelHeading"
               :hide-spin-buttons="true"
               type="number"
@@ -401,12 +401,13 @@
         </v-row>
         <v-row v-if="visibleProperties.has('modelPitch')" no-gutters>
           <v-col cols="6">
-            <VcsLabel>{{
+            <VcsLabel :html-for="`${cid}-vp-model-pitch`">{{
               $t('components.vectorProperties.modelPitch')
             }}</VcsLabel>
           </v-col>
           <v-col>
             <VcsTextField
+              :id="`${cid}-vp-model-pitch`"
               v-model.number="localValue.modelPitch"
               :hide-spin-buttons="true"
               type="number"
@@ -418,12 +419,13 @@
         </v-row>
         <v-row v-if="visibleProperties.has('modelRoll')" no-gutters>
           <v-col cols="6">
-            <VcsLabel>{{
+            <VcsLabel :html-for="`${cid}-vp-model-roll`">{{
               $t('components.vectorProperties.modelRoll')
             }}</VcsLabel>
           </v-col>
           <v-col>
             <VcsTextField
+              :id="`${cid}-vp-model-roll`"
               v-model.number="localValue.modelRoll"
               :hide-spin-buttons="true"
               type="number"
@@ -433,15 +435,25 @@
             />
           </v-col>
         </v-row>
+        <v-row v-if="visibleProperties.has('modelAutoScale')" no-gutters>
+          <v-col cols="6">
+            <VcsLabel>{{
+              $t('components.vectorProperties.modelAutoScale')
+            }}</VcsLabel>
+          </v-col>
+          <v-col>
+            <VcsCheckbox v-model="localValue.modelAutoScale" />
+          </v-col>
+        </v-row>
         <v-row v-if="visibleProperties.has('baseUrl')" no-gutters>
           <v-col>
-            <VcsLabel html-for="vp-base-url">{{
+            <VcsLabel :html-for="`${cid}-vp-base-url`">{{
               $t('components.vectorProperties.baseUrl')
             }}</VcsLabel>
           </v-col>
           <v-col>
             <VcsTextField
-              id="vp-base-url"
+              :id="`${cid}-vp-base-url`"
               clearable
               v-model="localValue.baseUrl"
               :placeholder="'baseUrl' in localValue ? 'path/to/files/' : ''"
@@ -466,6 +478,7 @@
   import VcsSelect from '../form-inputs-controls/VcsSelect.vue';
   import VcsCheckbox from '../form-inputs-controls/VcsCheckbox.vue';
   import VcsChipArrayInput from '../form-inputs-controls/VcsChipArrayInput.vue';
+  import { useComponentId } from '../composables.js';
 
   export const genericVectorProperties = [
     'altitudeMode',
@@ -486,6 +499,7 @@
     'modelHeading',
     'modelPitch',
     'modelRoll',
+    'modelAutoScale',
     'baseUrl',
   ];
 
@@ -587,6 +601,14 @@
             value: 'clampToGround',
             title: 'components.vectorProperties.clampToGround',
           },
+          {
+            value: 'clampToTerrain',
+            title: 'components.vectorProperties.clampToTerrain',
+          },
+          {
+            value: 'clampTo3DTiles',
+            title: 'components.vectorProperties.clampTo3DTiles',
+          },
           {
             value: 'absolute',
             title: 'components.vectorProperties.absolute',
@@ -594,10 +616,20 @@
         ];
 
         if (visibleProperties.value.has('heightAboveGround')) {
-          altitudeModes.push({
-            value: 'relativeToGround',
-            title: 'components.vectorProperties.relativeToGround',
-          });
+          altitudeModes.push(
+            {
+              value: 'relativeToGround',
+              title: 'components.vectorProperties.relativeToGround',
+            },
+            {
+              value: 'relativeToTerrain',
+              title: 'components.vectorProperties.relativeToTerrain',
+            },
+            {
+              value: 'relativeTo3DTiles',
+              title: 'components.vectorProperties.relativeTo3DTiles',
+            },
+          );
         }
 
         return altitudeModes;
@@ -698,6 +730,8 @@
           : [],
       );
 
+      const cid = useComponentId();
+
       return {
         localValue,
         headerActions,
@@ -712,6 +746,7 @@
         storeyHeights,
         modelScale,
         dimensionsUpperCase,
+        cid,
       };
     },
   };

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

@@ -75,7 +75,7 @@ declare const _default: import("vue").DefineComponent<{
             toString: () => string;
         } | undefined;
         getEyeOffset: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3 | undefined;
-        heightAboveGround: number;
+        heightAboveGround: number | undefined;
         getHeightAboveGround: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => number;
         skirt: number;
         getSkirt: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => number;
@@ -106,7 +106,7 @@ declare const _default: import("vue").DefineComponent<{
         modelRoll: number;
         getModelRoll: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => number;
         modelOptions: Record<string, unknown> | undefined;
-        getModelOptions: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => Record<string, unknown>;
+        getModelOptions: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => Record<string, unknown> | undefined;
         modelAutoScale: boolean;
         getModelAutoScale: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => boolean;
         baseUrl: string | undefined;
@@ -210,6 +210,7 @@ declare const _default: import("vue").DefineComponent<{
         getPrimitiveOptions: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => import("@vcmap/core", { with: { "resolution-mode": "import" } }).VectorPropertiesPrimitiveOptions<import("@vcmap/core", { with: { "resolution-mode": "import" } }).PrimitiveOptionsType> | undefined;
         getPrimitive: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => import("@vcmap/core", { with: { "resolution-mode": "import" } }).VectorPropertiesPrimitive | null;
         getModel: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => import("@vcmap/core", { with: { "resolution-mode": "import" } }).VectorPropertiesModelOptions | null;
+        renderAs: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => "geometry" | "model" | "primitive";
         setVcsMeta: (vcsMeta: import("@vcmap/core", { with: { "resolution-mode": "import" } }).VcsMeta) => void;
         setValues: (options: import("@vcmap/core", { with: { "resolution-mode": "import" } }).VectorPropertiesOptions) => void;
         getValues: () => import("@vcmap/core", { with: { "resolution-mode": "import" } }).VectorPropertiesOptions;
@@ -241,6 +242,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="°"
@@ -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/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/contentTree/layerContentTreeItem.d.ts

@@ -11,6 +11,14 @@
  * @param {string|import("@vcmap/core").Viewpoint=} viewpoint
  */
 export function setViewpointAction(item: import("./contentTreeItem.js").default, app: import("@src/vcsUiApp.js").default, viewpoint?: (string | import("@vcmap/core").Viewpoint) | undefined): void;
+/**
+ * @param {import("./contentTreeItem.js").default} item
+ * @param {import("@src/vcsUiApp.js").default} app
+ * @param {Array<Function>} listeners
+ * @param {Array<string>} layerNames
+ * @param {Array<string>=} availableStyles
+ */
+export function setStyleAction(item: import("./contentTreeItem.js").default, app: import("@src/vcsUiApp.js").default, listeners: Array<Function>, layerNames: Array<string>, availableStyles?: Array<string> | undefined): void;
 /**
  * @param {import("@vcmap/core").Layer} layer
  * @returns {StateActionState}
@@ -51,11 +59,6 @@ declare class LayerContentTreeItem extends VcsObjectContentTreeItem<LayerContent
      * @private
      */
     private get _layer();
-    /**
-     * @param {Array<string>=} availableStyles
-     * @private
-     */
-    private _setStyleAction;
     /**
      * @private
      */

package/src/contentTree/layerContentTreeItem.js

@@ -43,6 +43,47 @@ export function setViewpointAction(item, app, viewpoint) {
   }
 }
 
+/**
+ * @param {import("./contentTreeItem.js").default} item
+ * @param {import("@src/vcsUiApp.js").default} app
+ * @param {Array<Function>} listeners
+ * @param {Array<string>} layerNames
+ * @param {Array<string>=} availableStyles
+ */
+export function setStyleAction(
+  item,
+  app,
+  listeners,
+  layerNames,
+  availableStyles,
+) {
+  const name = 'StyleSelector';
+  item.removeAction(name);
+  if (Array.isArray(availableStyles) && availableStyles.length > 0) {
+    const { action, destroy } = createModalAction(
+      {
+        name,
+        icon: '$vcsColorSwatch',
+        title: 'content.styleAction.title',
+      },
+      {
+        component,
+        position: {
+          width: 200,
+        },
+        props: reactive({
+          availableStyles: availableStyles.slice(),
+          layerNames: layerNames.slice(),
+        }),
+      },
+      app,
+      vcsAppSymbol,
+    );
+    item.addAction(action, 4);
+    listeners.push(destroy);
+  }
+}
+
 /**
  * @param {import("@vcmap/core").Layer} layer
  * @returns {StateActionState}
@@ -101,38 +142,6 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
     return this._app.layers.getByKey(this._layerName);
   }
 
-  /**
-   * @param {Array<string>=} availableStyles
-   * @private
-   */
-  _setStyleAction(availableStyles) {
-    const name = 'StyleSelector';
-    this.removeAction(name);
-    if (Array.isArray(availableStyles) && availableStyles.length > 0) {
-      const { action, destroy } = createModalAction(
-        {
-          name,
-          icon: '$vcsColorSwatch',
-          title: 'content.styleAction.title',
-        },
-        {
-          component,
-          position: {
-            width: 200,
-          },
-          props: reactive({
-            availableStyles: availableStyles.slice(),
-            layerName: this._layerName,
-          }),
-        },
-        this._app,
-        vcsAppSymbol,
-      );
-      this.addAction(action, 4);
-      this._listeners.push(destroy);
-    }
-  }
-
   /**
    * @private
    */
@@ -165,8 +174,13 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
    */
   _setProperties(properties) {
     super._setProperties(properties);
-
-    this._setStyleAction(properties.availableStyles);
+    setStyleAction(
+      this,
+      this._app,
+      this._listeners,
+      [this._layerName],
+      properties.availableStyles,
+    );
     setViewpointAction(this, this._app, properties.defaultViewpoint);
   }
 

package/src/contentTree/layerGroupContentTreeItem.d.ts

@@ -2,6 +2,7 @@ export default LayerGroupContentTreeItem;
 export type LayerGroupContentTreeItemOptions = import("./contentTreeItem.js").ContentTreeItemOptions & {
     layerNames: string[];
     defaultViewpoint?: string;
+    availableStyles?: string[];
 };
 /**
  * A layer group. When clicked will try to activate all layers in the group or deactivate all layer in the group if all are active.
@@ -25,10 +26,15 @@ declare class LayerGroupContentTreeItem extends ContentTreeItem {
      */
     private _listeners;
     /**
-     * @type {string|null}
+     * @type {string|undefined}
      * @private
      */
     private _defaultViewpoint;
+    /**
+     * @type {string[]}
+     * @private
+     */
+    private _availableStyles;
     /**
      * @type {Array<import("@vcmap/core").Layer>}
      * @private