@vcmap/ui 5.3.2 → 6.0.0-rc.1

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

@@ -6,7 +6,7 @@ export const scaleByDistanceDefault: number[];
 export const eyeOffsetDefault: number[];
 export const dimensionsUpperCase: string[];
 declare const _default: import("vue").DefineComponent<{
-    value: {
+    modelValue: {
         type: ObjectConstructor;
         default: () => void;
     };
@@ -45,7 +45,7 @@ declare const _default: import("vue").DefineComponent<{
         icon: string;
         callback: () => void;
     }[]>;
-    visibleProperties: import("vue").ComputedRef<Set<any>>;
+    visibleProperties: import("vue").ComputedRef<Set<unknown>>;
     altitudeMode: import("vue").WritableComputedRef<any>;
     availableAltitudeModes: import("vue").ComputedRef<{
         value: string;
@@ -74,8 +74,8 @@ declare const _default: import("vue").DefineComponent<{
     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, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
         type: ObjectConstructor;
         default: () => void;
     };
@@ -108,12 +108,12 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
 }>>, {
-    value: Record<string, any>;
+    modelValue: Record<string, any>;
     properties: unknown[];
     expandable: boolean;
     startOpen: boolean;
-    showReset: boolean;
     show3DProperties: boolean;
     showDividers: boolean;
-}>;
+    showReset: boolean;
+}, {}>;
 export default _default;

package/src/components/vector-properties/composables.js

@@ -18,7 +18,7 @@ export function usePrimitiveProperty(modelObject, key, emit) {
       if (modelObject()[key] !== value) {
         const newParams = structuredClone(modelObject());
         const changedParams = { [key]: value ?? undefined };
-        emit('input', Object.assign(newParams, changedParams));
+        emit('update:modelValue', Object.assign(newParams, changedParams));
         emit('propertyChange', changedParams);
       }
     },
@@ -61,7 +61,7 @@ export function useArrayProperty(modelObject, key, emit, arrayLength) {
           }
 
           if (changedParams) {
-            emit('input', Object.assign(newParams, changedParams));
+            emit('update:modelValue', Object.assign(newParams, changedParams));
             emit('propertyChange', changedParams);
           }
         },
@@ -93,7 +93,7 @@ export function useHasProperty(modelObject, key, emit, valueDefault) {
       } else {
         changedParams = { [key]: undefined };
       }
-      emit('input', Object.assign(newParams, changedParams));
+      emit('update:modelValue', Object.assign(newParams, changedParams));
       emit('propertyChange', changedParams);
     },
   });

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,

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

@@ -15,9 +15,9 @@ export function isPositiveNumber(number: number): boolean | string;
  */
 export function gotoViewpointOptions(app: import("@vcmap/ui").VcsUiApp, options: import("@vcmap/core").ViewpointOptions): Promise<void>;
 declare const _default: import("vue").DefineComponent<{
-    value: {
+    modelValue: {
         type: ObjectConstructor;
-        default: undefined;
+        default: import("@vcmap/core", { with: { "resolution-mode": "import" } }).ViewpointOptions;
     };
     startSync: {
         type: BooleanConstructor;
@@ -49,27 +49,17 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     isCesiumMap: import("vue").Ref<boolean>;
+    localValue: import("vue").Ref<any>;
+    title: import("vue").WritableComputedRef<any>;
     gotoViewpoint: () => Promise<void>;
-    handleInput: (key: any) => Promise<void>;
+    handleInput: (key: any, value: any) => Promise<void>;
     updateFromViewAction: {
         name: string;
         icon: string;
         title: string;
         callback(): Promise<void>;
     };
-    editAction: import("../../actions/actionHelper.js").VcsAction;
-    name: import("vue").WritableComputedRef<any>;
-    title: import("vue").WritableComputedRef<any>;
-    animate: import("vue").WritableComputedRef<any>;
-    duration: import("vue").WritableComputedRef<any>;
-    groundPosition: import("vue").WritableComputedRef<any>;
-    cameraPosition: import("vue").WritableComputedRef<any>;
-    distance: import("vue").WritableComputedRef<any>;
-    hpr: {
-        heading: import("vue").WritableComputedRef<any>;
-        pitch: import("vue").WritableComputedRef<any>;
-        roll: import("vue").WritableComputedRef<any>;
-    };
+    editAction: import("../../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction;
     hprSliderOptions: {
         heading: {
             min: number;
@@ -89,10 +79,10 @@ declare const _default: import("vue").DefineComponent<{
     };
     isFiniteNumber: typeof isFiniteNumber;
     isPositiveNumber: typeof isPositiveNumber;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
-    value: {
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
         type: ObjectConstructor;
-        default: undefined;
+        default: import("@vcmap/core", { with: { "resolution-mode": "import" } }).ViewpointOptions;
     };
     startSync: {
         type: BooleanConstructor;
@@ -122,8 +112,10 @@ declare const _default: import("vue").DefineComponent<{
         type: ArrayConstructor;
         default: () => never[];
     };
-}>>, {
-    value: Record<string, any>;
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    modelValue: Record<string, any>;
     expandable: boolean;
     startSync: boolean;
     hideName: boolean;
@@ -131,5 +123,5 @@ declare const _default: import("vue").DefineComponent<{
     hideAnimate: boolean;
     hideGeneral: boolean;
     nameRules: unknown[];
-}>;
+}, {}>;
 export default _default;

package/src/components/viewpoint/VcsViewpointEditor.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script>
-  import { inject, onUnmounted, ref } from 'vue';
+  import { inject, onUnmounted, ref, toRaw } from 'vue';
   import { getLogger } from '@vcsuite/logger';
   import deepEqual from 'fast-deep-equal';
   import AbstractConfigEditor from '../plugins/AbstractConfigEditor.vue';
@@ -69,10 +69,7 @@
       );
 
       onUnmounted(() => {
-        if (
-          !cancel &&
-          !deepEqual(originalConfig, structuredClone(localConfig.value))
-        ) {
+        if (!cancel && !deepEqual(originalConfig, toRaw(localConfig.value))) {
           props.setConfig(localConfig.value);
         }
       });

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

@@ -12,11 +12,11 @@ declare const _default: import("vue").DefineComponent<{
         default: () => never[];
     };
 }, {
-    localConfig: any;
+    localConfig: import("vue").Ref<any>;
     apply(): void;
     cancel(): Promise<void>;
     reset: () => Promise<void>;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     getConfig: {
         type: FunctionConstructor;
         required: true;
@@ -31,5 +31,5 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     nameRules: unknown[];
-}>;
+}, {}>;
 export default _default;

package/src/contentTree/LayerTree.vue

@@ -3,7 +3,7 @@
     <VcsTreeview
       v-if="tree && tree.length"
       :items="tree"
-      :open.sync="open"
+      v-model:opened="opened"
       :show-searchbar="true"
       :searchbar-placeholder="'content.search.placeholder'"
       item-children="visibleChildren"
@@ -15,8 +15,8 @@
 </template>
 
 <script>
-  import { inject, watch } from 'vue';
-  import { VSheet } from 'vuetify/lib';
+  import { computed, inject, onMounted, reactive, watch } from 'vue';
+  import { VSheet } from 'vuetify/components';
   import VcsTreeview from '../components/lists/VcsTreeview.vue';
 
   const openStateMapSymbol = Symbol('openStateMap');
@@ -35,13 +35,15 @@
     },
     setup(props) {
       const app = inject('vcsApp');
-      const open = app.contentTree.getTreeOpenStateRef(props.windowState.id);
+      const open = app.contentTree.getTreeOpenState(props.windowState.id);
       const tree = app.contentTree.getComputedVisibleTree(props.windowState.id);
 
       function getWithVisibleChildren(item) {
         return [
           item.name,
-          ...item.visibleChildren.map((c) => getWithVisibleChildren(c)).flat(),
+          ...(item.visibleChildren
+            ?.map((c) => getWithVisibleChildren(c))
+            ?.flat() ?? []),
         ];
       }
 
@@ -57,7 +59,8 @@
         tree,
         (value, oldValue) => {
           if (openStateMap.has(app.maps.activeMap?.name)) {
-            open.value = openStateMap.get(app.maps.activeMap?.name);
+            open.splice(0);
+            open.push(...openStateMap.get(app.maps.activeMap?.name));
           } else {
             const items = [...app.contentTree]
               .filter((i) => i.initOpen && i.getTreeViewItem().visible)
@@ -66,9 +69,9 @@
               ? oldValue.map(getWithVisibleChildren).flat()
               : [];
             const changed = items.filter(
-              (name) => !oldValues.includes(name) && !open.value.includes(name),
+              (name) => !oldValues.includes(name) && !open.includes(name),
             );
-            open.value.push(...changed);
+            open.push(...changed);
           }
         },
         { immediate: true },
@@ -76,13 +79,31 @@
 
       watch(open, () => {
         if (app.maps.activeMap) {
-          openStateMap.set(app.maps.activeMap.name, [...open.value]);
+          openStateMap.set(app.maps.activeMap.name, [...open]);
         }
       });
 
+      // 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,
-        open,
+        opened: computed({
+          get: () => opened,
+          set: (value) => {
+            opened.splice(0);
+            opened.push(...value);
+          },
+        }),
       };
     },
   };

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

@@ -5,11 +5,11 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     tree: any;
-    open: any;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    opened: import("vue").WritableComputedRef<any[]>;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     windowState: {
         type: ObjectConstructor;
         required: true;
     };
-}>>, {}>;
+}>>, {}, {}>;
 export default _default;

package/src/contentTree/contentTreeCollection.d.ts

@@ -106,8 +106,8 @@ declare class ContentTreeCollection extends IndexedCollection<ContentTreeItem> {
     getChildrenForSubTree(id: string): Array<ContentTreeItem>;
     /**
      * @param {string} id
-     * @returns {import("vue").Ref<Array<string>>}
+     * @returns {Array<string>}
      */
-    getTreeOpenStateRef(id: string): import("vue").Ref<Array<string>>;
+    getTreeOpenState(id: string): Array<string>;
 }
 import { IndexedCollection } from '@vcmap/core';