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

package/src/application/VcsApp.vue

@@ -25,8 +25,8 @@
         :text-page="dataProtection"
         :window-id="'dataProtectionWindow'"
       />
+      <v-spacer />
       <VcsAttributionsFooter
-        class="align-wrapper"
         :entries="attributionEntries"
         :attribution-action="attributionAction"
       />
@@ -38,18 +38,13 @@
   :deep(.v-application--wrap) {
     min-height: fit-content;
   }
-  .align-wrapper {
-    position: absolute;
-    right: 0;
-    margin-right: 4px !important;
-  }
 </style>
 
 <script>
   import { computed, onMounted, onUnmounted, provide, watch, ref } from 'vue';
   import { useDisplay } from 'vuetify';
   import { getVcsAppById, moduleIdSymbol } from '@vcmap/core';
-  import { VContainer, VFooter } from 'vuetify/components';
+  import { VContainer, VFooter, VSpacer } from 'vuetify/components';
   import { getLogger } from '@vcsuite/logger';
   import VcsContainer from './VcsContainer.vue';
   import { ButtonLocation } from '../manager/navbarManager.js';
@@ -704,6 +699,7 @@
       VcsNavbar,
       VContainer,
       VFooter,
+      VSpacer,
     },
     props: {
       appId: {

package/src/application/VcsAttributionsFooter.vue

@@ -1,15 +1,18 @@
 <template>
-  <span class="d-inline-block text-truncate mr-10">
-    <span
-      v-for="attribution in mergedAttributions"
-      class="attribution"
-      :key="attribution.provider"
-    >
-      <a :href="attribution.url" target="_blank">
-        {{ $st(attribution.provider) }} <span>{{ attribution.years }}</span>
-      </a>
-    </span>
+  <div class="d-flex align-center justify-end overflow-hidden">
+    <div class="attribution-container">
+      <span
+        v-for="attribution in mergedAttributions"
+        class="attribution"
+        :key="attribution.provider"
+      >
+        <a :href="attribution.url" target="_blank">
+          {{ $st(attribution.provider) }} <span>{{ attribution.years }}</span>
+        </a>
+      </span>
+    </div>
     <VcsButton
+      class="flex-shrink-0"
       :key="attributionAction.name"
       :tooltip="attributionAction.title"
       :icon="attributionAction.icon"
@@ -17,10 +20,16 @@
       :disabled="attributionAction.disabled"
       @click.stop="attributionAction.callback($event)"
     />
-  </span>
+  </div>
 </template>
 
 <style lang="scss" scoped>
+  .attribution-container {
+    max-width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
   .attribution {
     font-size: smaller;
     &:before {

package/src/application/VcsTextPageFooter.vue

@@ -1,6 +1,6 @@
 <template v-if="textPage.title">
-  <span class="d-inline-block text-truncate mr-1">
-    <span v-if="textPage.url" class="imprint">
+  <span class="d-inline-block text-truncate mr-1 flex-shrink-0">
+    <span v-if="textPage.url" class="text-page-footer">
       <a :href="$st(textPage.url)" target="_blank"
         >{{ $st(textPage.title) }} <span></span>
       </a>
@@ -8,7 +8,7 @@
 
     <span
       v-else
-      class="imprint cursor-pointer text-decoration-underline"
+      class="text-page-footer cursor-pointer text-decoration-underline"
       @click="addTextPage()"
       >{{ $st(textPage.title) }}</span
     >
@@ -21,7 +21,7 @@
 </template>
 
 <style lang="scss" scoped>
-  .imprint {
+  .text-page-footer {
     font-size: smaller;
     a {
       color: var(--v-text-color);

package/src/components/form-inputs-controls/VcsLabel.vue

@@ -8,20 +8,32 @@
       'pa-1': !paddingProvided,
     }"
   >
-    <slot />
-    <v-tooltip
-      v-if="tooltip"
-      activator="parent"
-      :location="tooltipPosition"
-      :text="$st(tooltip)"
-    ></v-tooltip>
+    <span class="ellipsis-text" ref="labelTextRef">
+      <slot />
+      <v-tooltip
+        v-if="labelTooltip"
+        activator="parent"
+        :location="tooltipPosition"
+        :text="$st(labelTooltip)"
+      ></v-tooltip>
+    </span>
   </label>
 </template>
 
 <style lang="scss" scoped>
+  .ellipsis-text {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
   .vcs-label {
     box-sizing: content-box;
     display: flex;
+    flex-direction: row;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
     align-items: center;
     height: calc(var(--v-vcs-font-size) * 2 - 2px);
     font-size: var(--v-vcs-font-size);
@@ -36,7 +48,8 @@
 </style>
 <script>
   import { VTooltip } from 'vuetify/components';
-  import { usePadding } from '../composables.js';
+  import { computed, ref } from 'vue';
+  import { createEllipseTooltip, usePadding } from '../composables.js';
 
   /**
    * @description Stylized wrapper around {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label |label label}.
@@ -76,8 +89,18 @@
     },
     setup(props, { attrs }) {
       const paddingProvided = usePadding(attrs);
+      const labelTextRef = ref();
+      const labelTooltip = createEllipseTooltip(
+        computed(() => {
+          return labelTextRef.value;
+        }),
+        computed(() => props.tooltip),
+        computed(() => labelTextRef.value?.textContent),
+      );
       return {
         paddingProvided,
+        labelTooltip,
+        labelTextRef,
       };
     },
   };

package/src/components/form-inputs-controls/VcsLabel.vue.d.ts

@@ -21,6 +21,8 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     paddingProvided: import("vue").ComputedRef<boolean>;
+    labelTooltip: import("vue").ComputedRef<string>;
+    labelTextRef: import("vue").Ref<any>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     htmlFor: {
         type: StringConstructor;

package/src/components/form-inputs-controls/VcsSelect.vue

@@ -173,7 +173,7 @@
           if (rawProps.multiple) {
             return [];
           }
-          return '';
+          return null;
         },
       },
       tooltip: {

package/src/components/form-inputs-controls/VcsSelect.vue.d.ts

@@ -5,7 +5,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     modelValue: {
         type: (BooleanConstructor | ArrayConstructor | StringConstructor | NumberConstructor)[];
-        default(rawProps: any): never[] | "";
+        default(rawProps: any): never[] | null;
     };
     tooltip: {
         type: StringConstructor;
@@ -35,7 +35,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     modelValue: {
         type: (BooleanConstructor | ArrayConstructor | StringConstructor | NumberConstructor)[];
-        default(rawProps: any): never[] | "";
+        default(rawProps: any): never[] | null;
     };
     tooltip: {
         type: StringConstructor;

package/src/components/lists/VcsTreeview.vue

@@ -17,6 +17,7 @@
       collapse-icon="mdi-chevron-down"
       v-bind="{ ...$props, ...$attrs }"
       :search="localSearchValue"
+      @click:select="itemClicked($event.id, $event.event)"
     >
       <template #title="scope">
         <slot name="title" v-bind="scope ?? {}">
@@ -143,6 +144,10 @@
       VTreeview,
     },
     props: {
+      items: {
+        type: Array,
+        default: () => [],
+      },
       search: {
         type: String,
         default: '',
@@ -190,6 +195,23 @@
         localSearchValue,
         handleFilter,
         forwardSlots,
+        itemClicked(name, event) {
+          const items = props.items.slice();
+          let item;
+          while (items.length > 0) {
+            item = items.pop();
+            if (item.name === name) {
+              break;
+            }
+            if (item.children?.length > 0) {
+              items.push(...item.children);
+            }
+          }
+
+          if (item?.clicked && !item?.disabled) {
+            item.clicked(event);
+          }
+        },
       };
     },
   };

package/src/components/lists/VcsTreeview.vue.d.ts

@@ -1,4 +1,8 @@
 declare const _default: import("vue").DefineComponent<{
+    items: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
     search: {
         type: StringConstructor;
         default: string;
@@ -16,7 +20,12 @@ declare const _default: import("vue").DefineComponent<{
     localSearchValue: import("vue").Ref<any>;
     handleFilter: (value: string, q: string, item: Object) => number;
     forwardSlots: import("vue").ComputedRef<string[]>;
+    itemClicked(name: any, event: any): void;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:search"[], "update:search", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    items: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
     search: {
         type: StringConstructor;
         default: string;
@@ -33,6 +42,7 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:search"?: ((...args: any[]) => any) | undefined;
 }, {
     search: string;
+    items: unknown[];
     showSearchbar: boolean;
     searchbarPlaceholder: string;
 }, {}>;

package/src/components/lists/VcsTreeviewTitle.vue

@@ -25,7 +25,11 @@
   }
 </style>
 <template>
-  <div class="title-parent pr-2" ref="titleParent">
+  <div
+    class="title-parent pr-2"
+    ref="titleParent"
+    @click.stop="item.clicked && !item.disabled && item.clicked($event)"
+  >
     <span>
       {{ $st(item.title || item.name) }}
     </span>

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

@@ -99,18 +99,28 @@
   /**
    * Returns the allowed transformation modes for the provided geometry types and number of features. Rotate is e.g. not allowed for a single point but for multiple points.
    * @param {Set<GeometryType>} geometryTypes A set with all geometry types of the features.
-   * @param {number} nFeatures The number of the features.
+   * @param {import("ol").Feature[]} features The features currently being edited.
+   * @param {import("@vcmap/core").VectorLayer} layer The number of the features.
+   * @param {boolean} is3D if the current map is 3D
    * @returns {Array<TransformationMode>} The allowed transformation modes.
    */
   export function getAllowedEditorTransformationModes(
     geometryTypes,
-    nFeatures,
+    features,
+    layer,
+    is3D = false,
   ) {
+    const nFeatures = features.length;
     const isSinglePoint =
-      nFeatures === 1 && geometryTypes.has(GeometryType.Point);
+      nFeatures === 1 &&
+      geometryTypes.has(GeometryType.Point) &&
+      (!is3D || layer.vectorProperties.renderAs(features[0]) === 'geometry');
+
     const isSingleCircle =
       nFeatures === 1 && geometryTypes.has(GeometryType.Circle);
+
     const isBboxSelected = geometryTypes.has(GeometryType.BBox);
+
     return [
       TransformationMode.TRANSLATE,
       ...(isSinglePoint || isSingleCircle || isBboxSelected
@@ -194,36 +204,7 @@
        * Sets the changed vector property options on the features. Also handles side effects.
        * @param {import("@vcmap/core").VectorPropertiesOptions} update New property values from user input.
        */
-      async function updateFeatureProperties(update) {
-        const extrusionLikePropertyKeys = [
-          'extrudedHeight',
-          'skirt',
-          'storeysAboveGround',
-          'storeysBelowGround',
-          'storeyHeightsAboveGround',
-          'storeyHeightsBelowGround',
-        ];
-        const setsExtrusionLikePropertyKeys =
-          !!extrusionLikePropertyKeys.filter(
-            (key) => Object.keys(update).includes(key) && !!update[key],
-          ).length;
-        if (
-          setsExtrusionLikePropertyKeys &&
-          featureProperties.value.altitudeMode !== 'absolute'
-        ) {
-          update.altitudeMode = 'absolute';
-        } else if (update.altitudeMode === 'clampToGround') {
-          extrusionLikePropertyKeys
-            .filter((key) => !!featureProperties.value[key])
-            .forEach((key) => {
-              update[key] = 0;
-            });
-        }
-        // when in create mode and changing altitude mode, this is triggered, but currentFeatures is empty array.
-        if (update.altitudeMode === 'absolute' && features?.length) {
-          await editorManager.placeCurrentFeaturesOnTerrain();
-        }
-
+      function updateFeatureProperties(update) {
         layer.value.vectorProperties.setValuesForFeatures(
           update,
           features.value,
@@ -297,7 +278,9 @@
       function getAllowedModifyActions() {
         const allowedModes = getAllowedEditorTransformationModes(
           currentGeometryTypes.value.types,
-          currentGeometryTypes.value.nFeatures,
+          features.value,
+          layer.value,
+          is3D.value,
         );
 
         const allowedActions = allowedModes.map((mode) => {

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

@@ -1,10 +1,12 @@
 /**
  * Returns the allowed transformation modes for the provided geometry types and number of features. Rotate is e.g. not allowed for a single point but for multiple points.
  * @param {Set<GeometryType>} geometryTypes A set with all geometry types of the features.
- * @param {number} nFeatures The number of the features.
+ * @param {import("ol").Feature[]} features The features currently being edited.
+ * @param {import("@vcmap/core").VectorLayer} layer The number of the features.
+ * @param {boolean} is3D if the current map is 3D
  * @returns {Array<TransformationMode>} The allowed transformation modes.
  */
-export function getAllowedEditorTransformationModes(geometryTypes: Set<GeometryType>, nFeatures: number): Array<TransformationMode>;
+export function getAllowedEditorTransformationModes(geometryTypes: Set<GeometryType>, features: import("ol").Feature[], layer: import("@vcmap/core").VectorLayer, is3D?: boolean): Array<TransformationMode>;
 export namespace EditorTransformationIcons {
     let translate: string;
     let rotate: string;
@@ -41,7 +43,7 @@ declare const _default: import("vue").DefineComponent<{
     availableModifyActions: import("vue").ShallowRef<never[]>;
     availableVectorProperties: import("vue").ShallowRef<never[]>;
     is3D: import("vue").Ref<boolean>;
-    updateFeatureProperties: (update: import("@vcmap/core").VectorPropertiesOptions) => Promise<void>;
+    updateFeatureProperties: (update: import("@vcmap/core").VectorPropertiesOptions) => void;
     defaultVectorProperties: import("@vcmap/core", { with: { "resolution-mode": "import" } }).VectorPropertiesOptions;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     allowedVectorProperties: {

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

@@ -21,13 +21,7 @@
             />
           </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="`${cid}-vp-height-above-ground`">{{
               $t('components.vectorProperties.heightAboveGround')
@@ -40,7 +34,7 @@
               :hide-spin-buttons="true"
               type="number"
               unit="m"
-              placeholder="0"
+              clearable
             />
           </v-col>
         </v-row>
@@ -345,6 +339,7 @@
             'modelHeading',
             'modelPitch',
             'modelRoll',
+            'modelAutoScale',
             'baseUrl',
           ].some((prop) => visibleProperties.has(prop))
         "
@@ -440,6 +435,16 @@
             />
           </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="`${cid}-vp-base-url`">{{
@@ -494,6 +499,7 @@
     'modelHeading',
     'modelPitch',
     'modelRoll',
+    'modelAutoScale',
     'baseUrl',
   ];
 
@@ -595,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',
@@ -602,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;

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;

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);
   }