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

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

@@ -1,3 +1,5 @@
+/// <reference types="@vcmap-cesium/engine" />
+/// <reference types="@vcmap/core/dist/cesium.js" />
 export const genericVectorProperties: string[];
 export const pointVectorProperties: string[];
 export const nonPointVectorProperties: string[];
@@ -8,7 +10,7 @@ export const dimensionsUpperCase: string[];
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
         type: ObjectConstructor;
-        default: () => void;
+        default: () => import("@vcmap/core", { with: { "resolution-mode": "import" } }).VectorPropertiesOptions;
     };
     valueDefault: {
         type: ObjectConstructor;
@@ -18,10 +20,18 @@ declare const _default: import("vue").DefineComponent<{
         type: ArrayConstructor;
         default: () => string[];
     };
+    altitudeModes: {
+        type: ArrayConstructor;
+        default: () => string[];
+    };
     show3DProperties: {
         type: BooleanConstructor;
         default: boolean;
     };
+    is2DFeature: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     showDividers: {
         type: BooleanConstructor;
         default: boolean;
@@ -39,6 +49,184 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
 }, {
+    localValue: import("vue").Ref<{
+        readonly propertyChanged: {
+            readonly numberOfListeners: number;
+            addEventListener: (listener: (event: import("@vcmap/core/dist/src/layer/vectorProperties.js", { with: { "resolution-mode": "import" } }).PropertyChangedKey[]) => void | Promise<void>) => () => void;
+            removeEventListener: (listener: (event: import("@vcmap/core/dist/src/layer/vectorProperties.js", { with: { "resolution-mode": "import" } }).PropertyChangedKey[]) => void | Promise<void>) => boolean;
+            raiseEvent: (event: import("@vcmap/core/dist/src/layer/vectorProperties.js", { with: { "resolution-mode": "import" } }).PropertyChangedKey[]) => void;
+            awaitRaisedEvent: (event: import("@vcmap/core/dist/src/layer/vectorProperties.js", { with: { "resolution-mode": "import" } }).PropertyChangedKey[]) => Promise<void>;
+            destroy: () => void;
+        };
+        altitudeMode: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).HeightReference;
+        getAltitudeMode: (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" } }).HeightReference;
+        allowPicking: boolean;
+        getAllowPicking: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => boolean;
+        classificationType: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).ClassificationType | undefined;
+        getClassificationType: (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" } }).ClassificationType | undefined;
+        scaleByDistance: {
+            near: number;
+            nearValue: number;
+            far: number;
+            farValue: number;
+            clone: (result?: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).NearFarScalar | undefined) => import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).NearFarScalar;
+            equals: (right?: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).NearFarScalar | undefined) => boolean;
+        } | undefined;
+        getScaleByDistance: (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" } }).NearFarScalar | undefined;
+        eyeOffset: {
+            x: number;
+            y: number;
+            z: number;
+            clone: (result?: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3 | undefined) => import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3;
+            equals: (right?: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3 | undefined) => boolean;
+            equalsEpsilon: (right?: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3 | undefined, relativeEpsilon?: number | undefined, absoluteEpsilon?: number | undefined) => boolean;
+            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 | 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;
+        groundLevel: number | undefined;
+        getGroundLevel: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => number | undefined;
+        extrudedHeight: number;
+        getExtrudedHeight: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => number;
+        storeysAboveGround: number;
+        getStoreysAboveGround: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => number;
+        storeysBelowGround: number;
+        getStoreysBelowGround: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => number;
+        storeyHeightsAboveGround: number[];
+        getStoreyHeightsAboveGround: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => number[];
+        storeyHeightsBelowGround: number[];
+        getStoreyHeightsBelowGround: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => number[];
+        modelUrl: string | undefined;
+        getModelUrl: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => string | undefined;
+        modelScaleX: number;
+        getModelScaleX: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => number;
+        modelScaleY: number;
+        getModelScaleY: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => number;
+        modelScaleZ: number;
+        getModelScaleZ: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => number;
+        modelHeading: number;
+        getModelHeading: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => number;
+        modelPitch: number;
+        getModelPitch: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => number;
+        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> | 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;
+        getBaseUrl: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => string | undefined;
+        primitiveOptions: {
+            type: import("@vcmap/core", { with: { "resolution-mode": "import" } }).PrimitiveOptionsType;
+            geometryOptions: {
+                length: number;
+                topRadius: number;
+                bottomRadius: number;
+                slices?: number | undefined;
+                vertexFormat?: {
+                    position: boolean;
+                    normal: boolean;
+                    st: boolean;
+                    bitangent: boolean;
+                    tangent: boolean;
+                    color: boolean;
+                } | undefined;
+            } | {
+                radius?: number | undefined;
+                stackPartitions?: number | undefined;
+                slicePartitions?: number | undefined;
+                vertexFormat?: {
+                    position: boolean;
+                    normal: boolean;
+                    st: boolean;
+                    bitangent: boolean;
+                    tangent: boolean;
+                    color: boolean;
+                } | undefined;
+            } | {
+                radii?: {
+                    x: number;
+                    y: number;
+                    z: number;
+                    clone: (result?: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3 | undefined) => import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3;
+                    equals: (right?: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3 | undefined) => boolean;
+                    equalsEpsilon: (right?: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3 | undefined, relativeEpsilon?: number | undefined, absoluteEpsilon?: number | undefined) => boolean;
+                    toString: () => string;
+                } | undefined;
+                innerRadii?: {
+                    x: number;
+                    y: number;
+                    z: number;
+                    clone: (result?: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3 | undefined) => import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3;
+                    equals: (right?: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3 | undefined) => boolean;
+                    equalsEpsilon: (right?: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3 | undefined, relativeEpsilon?: number | undefined, absoluteEpsilon?: number | undefined) => boolean;
+                    toString: () => string;
+                } | undefined;
+                minimumClock?: number | undefined;
+                maximumClock?: number | undefined;
+                minimumCone?: number | undefined;
+                maximumCone?: number | undefined;
+                stackPartitions?: number | undefined;
+                slicePartitions?: number | undefined;
+                vertexFormat?: {
+                    position: boolean;
+                    normal: boolean;
+                    st: boolean;
+                    bitangent: boolean;
+                    tangent: boolean;
+                    color: boolean;
+                } | undefined;
+            } | {
+                minimum: {
+                    x: number;
+                    y: number;
+                    z: number;
+                    clone: (result?: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3 | undefined) => import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3;
+                    equals: (right?: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3 | undefined) => boolean;
+                    equalsEpsilon: (right?: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3 | undefined, relativeEpsilon?: number | undefined, absoluteEpsilon?: number | undefined) => boolean;
+                    toString: () => string;
+                };
+                maximum: {
+                    x: number;
+                    y: number;
+                    z: number;
+                    clone: (result?: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3 | undefined) => import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3;
+                    equals: (right?: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3 | undefined) => boolean;
+                    equalsEpsilon: (right?: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3 | undefined, relativeEpsilon?: number | undefined, absoluteEpsilon?: number | undefined) => boolean;
+                    toString: () => string;
+                };
+                vertexFormat?: {
+                    position: boolean;
+                    normal: boolean;
+                    st: boolean;
+                    bitangent: boolean;
+                    tangent: boolean;
+                    color: boolean;
+                } | undefined;
+            } | undefined;
+            depthFailColor?: string | number[] | {
+                setTransform: (transform?: DOMMatrix2DInit | undefined) => void;
+            } | {
+                addColorStop: (offset: number, color: string) => void;
+            } | undefined;
+            offset?: number[] | undefined;
+            additionalOptions?: Record<string, unknown> | undefined;
+        } | undefined;
+        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;
+        getValuesForFeatures: (features: 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" } }).VectorPropertiesOptions;
+        setValuesForFeatures: (options: import("@vcmap/core", { with: { "resolution-mode": "import" } }).VectorPropertiesOptions, features: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>[]) => void;
+        getVcsMeta: (defaultOptions?: import("@vcmap/core", { with: { "resolution-mode": "import" } }).VectorPropertiesOptions | undefined) => Omit<import("@vcmap/core", { with: { "resolution-mode": "import" } }).VcsMeta, "version">;
+        destroy: () => void;
+    }>;
     headerActions: import("vue").ComputedRef<{
         name: string;
         title: string;
@@ -46,38 +234,36 @@ declare const _default: import("vue").DefineComponent<{
         callback: () => void;
     }[]>;
     visibleProperties: import("vue").ComputedRef<Set<unknown>>;
-    altitudeMode: import("vue").WritableComputedRef<any>;
-    availableAltitudeModes: import("vue").ComputedRef<{
+    availableAltitudeModes: import("vue").ComputedRef<({
         value: string;
-        text: string;
-    }[]>;
-    heightAboveGround: import("vue").WritableComputedRef<any>;
-    allowPicking: import("vue").WritableComputedRef<any>;
-    classificationType: import("vue").WritableComputedRef<any>;
-    scaleByDistance: import("vue").WritableComputedRef<any>[];
+        title: string;
+        props?: undefined;
+    } | {
+        value: string;
+        title: string;
+        props: {
+            disabled: boolean;
+        };
+    })[]>;
+    availableClassificationTypes: {
+        value: string;
+        title: string;
+    }[];
+    classificationType: import("vue").WritableComputedRef<"none" | import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).ClassificationType.CESIUM_3D_TILE | import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).ClassificationType.BOTH | undefined>;
     hasScaleByDistance: import("vue").WritableComputedRef<boolean>;
     scaleByDistanceDefault: number[];
-    eyeOffset: import("vue").WritableComputedRef<any>[];
     hasEyeOffset: import("vue").WritableComputedRef<boolean>;
     eyeOffsetDefault: number[];
-    groundLevel: import("vue").WritableComputedRef<any>;
-    extrudedHeight: import("vue").WritableComputedRef<any>;
-    skirt: import("vue").WritableComputedRef<any>;
-    storeysAboveGround: import("vue").WritableComputedRef<any>;
-    storeysBelowGround: import("vue").WritableComputedRef<any>;
     storeyHeights: import("vue").ComputedRef<{}>;
-    modelUrl: import("vue").WritableComputedRef<any>;
     modelScale: import("vue").ComputedRef<{}>;
-    modelHeading: import("vue").WritableComputedRef<any>;
-    modelPitch: import("vue").WritableComputedRef<any>;
-    modelRoll: import("vue").WritableComputedRef<any>;
-    baseUrl: import("vue").WritableComputedRef<any>;
-    reset: () => void;
     dimensionsUpperCase: string[];
-}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    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<{
     modelValue: {
         type: ObjectConstructor;
-        default: () => void;
+        default: () => import("@vcmap/core", { with: { "resolution-mode": "import" } }).VectorPropertiesOptions;
     };
     valueDefault: {
         type: ObjectConstructor;
@@ -87,10 +273,18 @@ declare const _default: import("vue").DefineComponent<{
         type: ArrayConstructor;
         default: () => string[];
     };
+    altitudeModes: {
+        type: ArrayConstructor;
+        default: () => string[];
+    };
     show3DProperties: {
         type: BooleanConstructor;
         default: boolean;
     };
+    is2DFeature: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     showDividers: {
         type: BooleanConstructor;
         default: boolean;
@@ -107,12 +301,16 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-}>>, {
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
     modelValue: Record<string, any>;
     properties: unknown[];
     expandable: boolean;
     startOpen: boolean;
+    altitudeModes: unknown[];
     show3DProperties: boolean;
+    is2DFeature: boolean;
     showDividers: boolean;
     showReset: boolean;
 }, {}>;

package/src/components/viewpoint/VcsViewpointComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-sheet>
+  <v-sheet class="vcs-viewpoint-component">
     <VcsFormSection
       heading="components.viewpoint.general"
       :expandable="expandable"
@@ -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>
@@ -176,17 +175,33 @@
     onUnmounted,
     reactive,
     ref,
+    toRaw,
     watch,
   } from 'vue';
   import { VSheet, VContainer, VRow, VCol } from 'vuetify/components';
   import { CesiumMap, ObliqueMap, OpenlayersMap, Viewpoint } from '@vcmap/core';
-  import VcsFormSection from '../form-inputs-controls/VcsFormSection.vue';
+  import VcsFormSection from '../section/VcsFormSection.vue';
   import VcsLabel from '../form-inputs-controls/VcsLabel.vue';
   import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
   import VcsCheckbox from '../form-inputs-controls/VcsCheckbox.vue';
   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
+   * @param {import("vue").Ref<import("vue").UnwrapRef<import("@vcmap/core").ViewpointOptions>>} localValue
+   * @param {import("@vcmap/core").Viewpoint} viewpoint
+   */
+  function updateLocalValueFromViewpoint(localValue, viewpoint) {
+    const options = viewpoint.toJSON();
+    options.name = localValue.value.name;
+    if (localValue.value.properties) {
+      options.properties = toRaw(localValue.value.properties);
+    }
+    localValue.value = options;
+  }
 
   /**
    * Set up post render handler, if action is active.
@@ -213,9 +228,7 @@
           ) {
             return;
           }
-          const options = viewpoint.toJSON();
-          options.name = localValue.value.name;
-          localValue.value = options;
+          updateLocalValueFromViewpoint(localValue, viewpoint);
           cachedViewpoint = viewpoint;
         },
       );
@@ -416,10 +429,10 @@
         title: 'components.viewpoint.updateFromView',
         async callback() {
           if (app.maps.activeMap) {
-            const viewpoint = await app.maps.activeMap.getViewpoint();
-            const options = viewpoint.toJSON();
-            options.name = localValue.value.name;
-            localValue.value = options;
+            updateLocalValueFromViewpoint(
+              localValue,
+              await app.maps.activeMap.getViewpoint(),
+            );
           }
         },
       };
@@ -476,6 +489,8 @@
         }
       }
 
+      const cid = useComponentId();
+
       return {
         isCesiumMap,
         localValue,
@@ -487,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

@@ -1,5 +1,6 @@
 <template>
   <AbstractConfigEditor
+    class="vcs-viewpoint-editor"
     @submit="apply"
     @cancel="cancel"
     @reset="reset"
@@ -7,9 +8,10 @@
     v-bind="{ ...$attrs, ...$props }"
   >
     <VcsViewpointComponent
-      v-model="localConfig"
       hide-name
       :name-rules="nameRules"
+      v-bind="$attrs"
+      v-model="localConfig"
     />
   </AbstractConfigEditor>
 </template>

package/src/contentTree/LayerTree.vue

@@ -1,10 +1,11 @@
 <template>
-  <div>
+  <div class="layer-tree">
     <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;
     /**