@vcmap/ui 5.3.3 → 6.0.0-rc.2

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[];
@@ -6,9 +8,9 @@ export const scaleByDistanceDefault: number[];
 export const eyeOffsetDefault: number[];
 export const dimensionsUpperCase: string[];
 declare const _default: import("vue").DefineComponent<{
-    value: {
+    modelValue: {
         type: ObjectConstructor;
-        default: () => void;
+        default: () => import("@vcmap/core", { with: { "resolution-mode": "import" } }).VectorPropertiesOptions;
     };
     valueDefault: {
         type: ObjectConstructor;
@@ -39,45 +41,212 @@ 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;
+        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>;
+        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;
+        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;
         icon: string;
         callback: () => void;
     }[]>;
-    visibleProperties: import("vue").ComputedRef<Set<any>>;
-    altitudeMode: import("vue").WritableComputedRef<any>;
+    visibleProperties: import("vue").ComputedRef<Set<unknown>>;
     availableAltitudeModes: import("vue").ComputedRef<{
         value: string;
-        text: string;
+        title: string;
     }[]>;
-    heightAboveGround: import("vue").WritableComputedRef<any>;
-    allowPicking: import("vue").WritableComputedRef<any>;
-    classificationType: import("vue").WritableComputedRef<any>;
-    scaleByDistance: import("vue").WritableComputedRef<any>[];
+    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[];
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
-    value: {
+}, 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;
@@ -107,13 +276,15 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-}>>, {
-    value: Record<string, any>;
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    modelValue: Record<string, any>;
     properties: unknown[];
     expandable: boolean;
     startOpen: boolean;
-    showReset: boolean;
     show3DProperties: boolean;
     showDividers: boolean;
-}>;
+    showReset: boolean;
+}, {}>;
 export default _default;

package/src/components/viewpoint/VcsViewpointComponent.vue

@@ -16,9 +16,8 @@
           <v-col>
             <VcsTextField
               id="name"
-              dense
               clearable
-              v-model="name"
+              v-model="localValue.name"
               :rules="nameRules"
             />
           </v-col>
@@ -32,7 +31,6 @@
           <v-col>
             <VcsTextField
               id="title"
-              dense
               clearable
               :placeholder="$t('components.viewpoint.titlePlaceholder')"
               v-model="title"
@@ -44,21 +42,20 @@
             <VcsCheckbox
               id="animate"
               label="components.viewpoint.animate"
-              dense
-              v-model="animate"
+              v-model="localValue.animate"
             />
           </v-col>
           <v-col>
             <VcsTextField
-              v-if="animate"
+              v-if="localValue.animate"
               id="duration"
-              dense
               clearable
+              :hide-spin-buttons="true"
               type="number"
               :min="1"
               unit="s"
               :title="$t('components.viewpoint.duration')"
-              v-model.number="duration"
+              v-model.number="localValue.duration"
             />
           </v-col>
         </v-row>
@@ -80,10 +77,10 @@
             </v-col>
           </v-row>
           <VcsCoordinate
-            v-model="groundPosition"
+            :model-value="localValue.groundPosition"
             :disabled="editAction.active"
-            @blur="handleInput('groundPosition')"
-            @input="handleInput('groundPosition')"
+            @blur="gotoViewpoint"
+            @update:model-value="handleInput('groundPosition')"
             hide-z
           />
         </template>
@@ -96,10 +93,10 @@
             </v-col>
           </v-row>
           <VcsCoordinate
-            v-model="cameraPosition"
+            :model-value="localValue.cameraPosition"
             :disabled="editAction.active"
-            @blur="handleInput('cameraPosition')"
-            @input="handleInput('cameraPosition')"
+            @blur="gotoViewpoint"
+            @update:model-value="(v) => handleInput('cameraPosition', v)"
           />
         </template>
         <template v-if="!isCesiumMap">
@@ -111,17 +108,17 @@
             </v-col>
             <v-col>
               <VcsTextField
-                dense
                 :min="0"
                 :step="100"
                 prefix="d"
                 unit="m"
                 :decimals="2"
+                :hide-spin-buttons="true"
                 type="number"
-                v-model.number="distance"
+                v-model.number="localValue.distance"
                 :disabled="editAction.active"
                 @blur="gotoViewpoint"
-                @input="gotoViewpoint"
+                @update:model-value="gotoViewpoint"
                 :rules="[isPositiveNumber]"
               />
             </v-col>
@@ -132,19 +129,20 @@
             <v-row no-gutters>
               <v-col cols="9">
                 <VcsLabel :html-for="key" dense>
-                  {{ $t(`components.viewpoint.${key}`) }}
+                  {{ $st(`components.viewpoint.${key}`) }}
                 </VcsLabel>
               </v-col>
               <v-col cols="3">
                 <VcsTextField
                   :id="key"
-                  dense
+                  :hide-spin-buttons="true"
                   type="number"
                   unit="°"
-                  v-model.number="hpr[key].value"
                   :disabled="editAction.active"
+                  :decimals="0"
+                  v-model.number="localValue[key]"
                   @blur="gotoViewpoint"
-                  @input="gotoViewpoint"
+                  @update:model-value="gotoViewpoint"
                   :rules="[isFiniteNumber]"
                   class="pr-0 ml-6"
                 />
@@ -153,14 +151,13 @@
             <v-row no-gutters>
               <v-col cols="12">
                 <VcsSlider
-                  dense
                   height="32"
                   hide-details
                   :step="0.1"
-                  v-model="hpr[key].value"
+                  v-model="localValue[key]"
                   v-bind="hprSliderOptions[key]"
                   :disabled="editAction.active"
-                  @input="gotoViewpoint"
+                  @update:model-value="gotoViewpoint"
                 />
               </v-col>
             </v-row>
@@ -181,7 +178,7 @@
     ref,
     watch,
   } from 'vue';
-  import { VSheet, VContainer, VRow, VCol } from 'vuetify/lib';
+  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 VcsLabel from '../form-inputs-controls/VcsLabel.vue';
@@ -189,38 +186,20 @@
   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 { usePrimitiveProperty } from '../vector-properties/composables.js';
-
-  /**
-   * @param {import("vue").emit} emit
-   * @param {import("@vcmap/core").Viewpoint} viewpoint
-   * @param {() => import("@vcmap/core").ViewpointOptions} getModelValue
-   */
-  function emitInput(emit, viewpoint, getModelValue) {
-    const clone = structuredClone(getModelValue());
-    const { name, animate, duration, ...options } = viewpoint.toJSON();
-    emit('input', Object.assign(clone, options));
-  }
+  import { useProxiedComplexModel } from '../modelHelper.js';
 
   /**
    * Set up post render handler, if action is active.
    * If action is inactive, destroy post render handler to allow manual editing.
    * @param {import("@vcmap/ui").VcsUiApp} app
-   * @param {import("vue").emit} emit
-   * @param {() => import("@vcmap/core").ViewpointOptions} getModelValue
+   * @param {import("vue").Ref<import("vue").UnwrapRef<import("@vcmap/core").ViewpointOptions>>} localValue
    * @param {import("vue").Ref<boolean>} isCesiumMap
    * @param {boolean} startSync - whether to set up post render handler on creation
    * @returns {{action: import("../../actions/actionHelper.js").VcsAction, destroy: function():void}}
    */
-  function createEditingAction(
-    app,
-    emit,
-    getModelValue,
-    isCesiumMap,
-    startSync,
-  ) {
+  function createEditingAction(app, localValue, isCesiumMap, startSync) {
     let destroyPostRenderListener = () => {};
-    let cachedViewpoint = new Viewpoint(getModelValue());
+    let cachedViewpoint = new Viewpoint(localValue.value);
 
     function setupPostRenderListener() {
       destroyPostRenderListener();
@@ -234,7 +213,9 @@
           ) {
             return;
           }
-          emitInput(emit, viewpoint, getModelValue);
+          const options = viewpoint.toJSON();
+          options.name = localValue.value.name;
+          localValue.value = options;
           cachedViewpoint = viewpoint;
         },
       );
@@ -320,9 +301,10 @@
    * @returns {Promise<void>}
    */
   export async function gotoViewpointOptions(app, options) {
-    const clone = structuredClone(options);
-    clone.animate = false;
-    const viewpoint = new Viewpoint(clone);
+    const viewpoint = new Viewpoint({
+      ...options,
+      animate: false,
+    });
     if (app.maps.activeMap && viewpoint.isValid()) {
       await app.maps.activeMap.gotoViewpoint(viewpoint);
     }
@@ -354,9 +336,9 @@
       VcsSlider,
     },
     props: {
-      value: {
+      modelValue: {
         type: Object,
-        default: undefined,
+        default: Viewpoint.getDefaultOptions(),
       },
       startSync: {
         type: Boolean,
@@ -387,55 +369,29 @@
         default: () => [],
       },
     },
+    emits: ['update:modelValue'],
     setup(props, { emit }) {
       const app = inject('vcsApp');
       const isCesiumMap = ref(
         app.maps.activeMap?.className === CesiumMap.className,
       );
+      const localValue = useProxiedComplexModel(props, 'modelValue', emit);
 
-      const name = usePrimitiveProperty(() => props.value, 'name', emit);
       const title = computed({
         get() {
-          return props.value?.properties?.title;
+          return localValue.value.properties?.title;
         },
         set(value) {
-          if (props.value?.properties?.title !== value) {
-            const clone = props.value ? structuredClone(props.value) : {};
-            if (clone.properties) {
-              clone.properties.title = value;
+          if (localValue.value.properties?.title !== value) {
+            if (localValue.value.properties) {
+              localValue.value.properties.title = value;
             } else {
-              clone.properties = { title: value };
+              localValue.value.properties = { title: value };
             }
-            emit('input', clone);
           }
         },
       });
-      const animate = usePrimitiveProperty(() => props.value, 'animate', emit);
-      const duration = usePrimitiveProperty(
-        () => props.value,
-        'duration',
-        emit,
-      );
-      const groundPosition = usePrimitiveProperty(
-        () => props.value,
-        'groundPosition',
-        emit,
-      );
-      const cameraPosition = usePrimitiveProperty(
-        () => props.value,
-        'cameraPosition',
-        emit,
-      );
-      const distance = usePrimitiveProperty(
-        () => props.value,
-        'distance',
-        emit,
-      );
-      const hpr = {
-        heading: usePrimitiveProperty(() => props.value, 'heading', emit),
-        pitch: usePrimitiveProperty(() => props.value, 'pitch', emit),
-        roll: usePrimitiveProperty(() => props.value, 'roll', emit),
-      };
+
       const hprSliderOptions = {
         heading: {
           min: 0,
@@ -461,15 +417,16 @@
         async callback() {
           if (app.maps.activeMap) {
             const viewpoint = await app.maps.activeMap.getViewpoint();
-            emitInput(emit, viewpoint, () => props.value);
+            const options = viewpoint.toJSON();
+            options.name = localValue.value.name;
+            localValue.value = options;
           }
         },
       };
 
       const { action: editAction, destroy } = createEditingAction(
         app,
-        emit,
-        () => props.value,
+        localValue,
         isCesiumMap,
         props.startSync,
       );
@@ -478,8 +435,8 @@
        * set cameraPosition for 3D if unset
        */
       const mapWatcher = watch(isCesiumMap, () => {
-        if (isCesiumMap.value && !cameraPosition.value) {
-          cameraPosition.value =
+        if (isCesiumMap.value && !localValue.value.cameraPosition) {
+          localValue.value.cameraPosition =
             app.maps.activeMap?.getViewpointSync()?.cameraPosition;
         }
       });
@@ -502,15 +459,16 @@
       });
 
       async function gotoViewpoint() {
-        await gotoViewpointOptions(app, props.value);
+        await gotoViewpointOptions(app, localValue.value);
       }
 
-      async function handleInput(key) {
+      async function handleInput(key, value) {
+        localValue.value[key] = value;
         if (app.maps.activeMap) {
           if (key === 'groundPosition') {
-            cameraPosition.value = undefined;
+            localValue.value.cameraPosition = undefined;
           } else if (key === 'cameraPosition') {
-            groundPosition.value = (
+            localValue.value.groundPosition = (
               await app.maps.activeMap.getViewpoint()
             ).groundPosition;
           }
@@ -520,18 +478,12 @@
 
       return {
         isCesiumMap,
+        localValue,
+        title,
         gotoViewpoint,
         handleInput,
         updateFromViewAction,
         editAction,
-        name,
-        title,
-        animate,
-        duration,
-        groundPosition,
-        cameraPosition,
-        distance,
-        hpr,
         hprSliderOptions,
         isFiniteNumber,
         isPositiveNumber,