@vcmap/ui 5.3.7 → 6.0.0-rc.10

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,30 +9,28 @@
       <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"
-              dense
+              :id="`${cid}-name`"
               clearable
-              v-model="name"
+              v-model="localValue.name"
               :rules="nameRules"
             />
           </v-col>
         </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"
-              dense
+              :id="`${cid}-title`"
               clearable
               :placeholder="$t('components.viewpoint.titlePlaceholder')"
               v-model="title"
@@ -42,23 +40,20 @@
         <v-row no-gutters v-if="!hideAnimate">
           <v-col cols="6">
             <VcsCheckbox
-              id="animate"
               label="components.viewpoint.animate"
-              dense
-              v-model="animate"
+              v-model="localValue.animate"
             />
           </v-col>
           <v-col>
             <VcsTextField
-              v-if="animate"
-              id="duration"
-              dense
+              v-if="localValue.animate"
               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 +75,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,32 +91,33 @@
             </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">
           <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
-                dense
+                :id="`${cid}-distance`"
                 :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>
@@ -131,20 +127,21 @@
           <div v-for="key in ['heading', 'pitch', 'roll']" :key="key">
             <v-row no-gutters>
               <v-col cols="9">
-                <VcsLabel :html-for="key" dense>
-                  {{ $t(`components.viewpoint.${key}`) }}
+                <VcsLabel :html-for="`${cid}-${key}`" dense>
+                  {{ $st(`components.viewpoint.${key}`) }}
                 </VcsLabel>
               </v-col>
               <v-col cols="3">
                 <VcsTextField
-                  :id="key"
-                  dense
+                  :id="`${cid}-${key}`"
+                  :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 +150,13 @@
             <v-row no-gutters>
               <v-col cols="12">
                 <VcsSlider
-                  dense
                   height="32"
                   hide-details
                   :step="0.1"
-                  v-model="hpr[key].value"
-                  v-bind="hprSliderOptions[key]"
                   :disabled="editAction.active"
-                  @input="gotoViewpoint"
+                  v-bind="hprSliderOptions[key]"
+                  v-model="localValue[key]"
+                  @update:model-value="gotoViewpoint"
                 />
               </v-col>
             </v-row>
@@ -179,48 +175,46 @@
     onUnmounted,
     reactive,
     ref,
+    toRaw,
     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 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 { usePrimitiveProperty } from '../vector-properties/composables.js';
+  import { useProxiedComplexModel } from '../modelHelper.js';
+  import { useComponentId } from '../composables.js';
 
   /**
-   * @param {import("vue").emit} emit
+   * 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
-   * @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));
+  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.
    * 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 +228,7 @@
           ) {
             return;
           }
-          emitInput(emit, viewpoint, getModelValue);
+          updateLocalValueFromViewpoint(localValue, viewpoint);
           cachedViewpoint = viewpoint;
         },
       );
@@ -320,9 +314,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 +349,9 @@
       VcsSlider,
     },
     props: {
-      value: {
+      modelValue: {
         type: Object,
-        default: undefined,
+        default: Viewpoint.getDefaultOptions(),
       },
       startSync: {
         type: Boolean,
@@ -387,55 +382,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,
@@ -460,16 +429,17 @@
         title: 'components.viewpoint.updateFromView',
         async callback() {
           if (app.maps.activeMap) {
-            const viewpoint = await app.maps.activeMap.getViewpoint();
-            emitInput(emit, viewpoint, () => props.value);
+            updateLocalValueFromViewpoint(
+              localValue,
+              await app.maps.activeMap.getViewpoint(),
+            );
           }
         },
       };
 
       const { action: editAction, destroy } = createEditingAction(
         app,
-        emit,
-        () => props.value,
+        localValue,
         isCesiumMap,
         props.startSync,
       );
@@ -478,8 +448,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 +472,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;
           }
@@ -518,23 +489,20 @@
         }
       }
 
+      const cid = useComponentId();
+
       return {
         isCesiumMap,
+        localValue,
+        title,
         gotoViewpoint,
         handleInput,
         updateFromViewAction,
         editAction,
-        name,
-        title,
-        animate,
-        duration,
-        groundPosition,
-        cameraPosition,
-        distance,
-        hpr,
         hprSliderOptions,
         isFiniteNumber,
         isPositiveNumber,
+        cid,
       };
     },
   };

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,11 @@ 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: {
+    cid: string;
+}, 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 +113,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 +124,5 @@ declare const _default: import("vue").DefineComponent<{
     hideAnimate: boolean;
     hideGeneral: boolean;
     nameRules: unknown[];
-}>;
+}, {}>;
 export default _default;

package/src/components/viewpoint/VcsViewpointEditor.vue

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

@@ -1,10 +1,11 @@
 <template>
-  <div>
+  <div class="layer-tree">
     <VcsTreeview
       v-if="tree && tree.length"
       :items="tree"
-      :open.sync="open"
       :show-searchbar="true"
+      v-model:opened="open"
+      open-on-click
       :searchbar-placeholder="'content.search.placeholder'"
       item-children="visibleChildren"
     />
@@ -15,8 +16,8 @@
 </template>
 
 <script>
-  import { inject, watch } from 'vue';
-  import { VSheet } from 'vuetify/lib';
+  import { inject, ref, watch } from 'vue';
+  import { VSheet } from 'vuetify/components';
   import VcsTreeview from '../components/lists/VcsTreeview.vue';
 
   const openStateMapSymbol = Symbol('openStateMap');
@@ -35,13 +36,15 @@
     },
     setup(props) {
       const app = inject('vcsApp');
-      const open = app.contentTree.getTreeOpenStateRef(props.windowState.id);
+      const open = ref(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() ?? []),
         ];
       }
 

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<{
+    open: import("vue").Ref<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

@@ -62,6 +62,7 @@ declare class ContentTreeCollection extends IndexedCollection<ContentTreeItem> {
     private _suspendListeners;
     /**
      * @private
+     * @param {Array<string>} exclude
      */
     private _clearSubTrees;
     /**
@@ -106,8 +107,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';