@vcmap/ui 6.3.11 → 7.0.0-rc.1

package/src/components/viewpoint/{VcsViewpointComponent.vue → VcsViewpointComponent.ts.vue}

@@ -10,7 +10,7 @@
         <v-row no-gutters v-if="!hideName">
           <v-col cols="6">
             <VcsLabel :html-for="`${cid}-name`" required>
-              {{ $t('components.viewpoint.name') }}
+              {{ $st('components.viewpoint.name') }}
             </VcsLabel>
           </v-col>
           <v-col>
@@ -25,14 +25,14 @@
         <v-row no-gutters v-if="!hideTitle">
           <v-col cols="6">
             <VcsLabel :html-for="`${cid}-title`">
-              {{ $t('components.viewpoint.title') }}
+              {{ $st('components.viewpoint.title') }}
             </VcsLabel>
           </v-col>
           <v-col>
             <VcsTextField
               :id="`${cid}-title`"
               clearable
-              :placeholder="$t('components.viewpoint.titlePlaceholder')"
+              :placeholder="$st('components.viewpoint.titlePlaceholder')"
               v-model="title"
             />
           </v-col>
@@ -52,7 +52,7 @@
               type="number"
               :min="1"
               unit="s"
-              :title="$t('components.viewpoint.duration')"
+              :title="$st('components.viewpoint.duration')"
               v-model.number="localValue.duration"
             />
           </v-col>
@@ -70,7 +70,7 @@
           <v-row no-gutters>
             <v-col cols="6">
               <VcsLabel html-for="groundPosition">
-                {{ $t('components.viewpoint.groundPosition') }}
+                {{ $st('components.viewpoint.groundPosition') }}
               </VcsLabel>
             </v-col>
           </v-row>
@@ -78,7 +78,7 @@
             :model-value="localValue.groundPosition"
             :disabled="editAction.active"
             @blur="gotoViewpoint"
-            @update:model-value="handleInput('groundPosition')"
+            @update:model-value="(v) => handleInput('groundPosition', v)"
             hide-z
           />
         </template>
@@ -86,7 +86,7 @@
           <v-row no-gutters>
             <v-col cols="6">
               <VcsLabel html-for="cameraPosition">
-                {{ $t('components.viewpoint.cameraPosition') }}
+                {{ $st('components.viewpoint.cameraPosition') }}
               </VcsLabel>
             </v-col>
           </v-row>
@@ -101,7 +101,7 @@
           <v-row no-gutters>
             <v-col>
               <VcsLabel :html-for="`${cid}-distance`">
-                {{ $t('components.viewpoint.distance') }}
+                {{ $st('components.viewpoint.distance') }}
               </VcsLabel>
             </v-col>
             <v-col>
@@ -132,7 +132,7 @@
               allow-text-input
               text-input-cols="3"
               hide-spin-buttons
-              v-bind="hprSliderOptions[key]"
+              v-bind="hprSliderOptions[key as keyof typeof hprSliderOptions]"
               v-model="localValue[key]"
               @blur="gotoViewpoint"
               @update:model-value="gotoViewpoint"
@@ -144,9 +144,11 @@
   </v-sheet>
 </template>
 
-<script>
+<script lang="ts">
+  import type { Coordinate } from 'ol/coordinate.js';
   import {
     computed,
+    defineComponent,
     inject,
     onMounted,
     onUnmounted,
@@ -155,23 +157,28 @@
     toRaw,
     watch,
   } from 'vue';
+  import type { PropType, Ref } from 'vue';
   import { VSheet, VContainer, VRow, VCol } from 'vuetify/components';
   import { CesiumMap, ObliqueMap, OpenlayersMap, Viewpoint } from '@vcmap/core';
-  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 VcsLabeledSlider from '../form-inputs-controls/VcsLabeledSlider.vue';
+  import type { ViewpointOptions } from '@vcmap/core';
+  import VcsFormSection from '../section/VcsFormSection.ts.vue';
+  import VcsLabel from '../form-inputs-controls/VcsLabel.ts.vue';
+  import VcsTextField from '../form-inputs-controls/VcsTextField.ts.vue';
+  import VcsCheckbox from '../form-inputs-controls/VcsCheckbox.ts.vue';
+  import VcsCoordinate from '../form-inputs-controls/VcsCoordinate.ts.vue';
+  import VcsLabeledSlider from '../form-inputs-controls/VcsLabeledSlider.ts.vue';
   import { useProxiedComplexModel } from '../modelHelper.js';
   import { useComponentId } from '../composables.js';
+  import type { VcsAction } from '../../actions/actionHelper.js';
+  import type VcsUiApp from '../../vcsUiApp.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) {
+  function updateLocalValueFromViewpoint(
+    localValue: Ref<ViewpointOptions>,
+    viewpoint: Viewpoint,
+  ): void {
     const options = viewpoint.toJSON();
     options.name = localValue.value.name;
     options.animate = localValue.value.animate;
@@ -185,17 +192,18 @@
   /**
    * 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").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}}
+   * @param startSync - whether to set up post render handler on creation
    */
-  function createEditingAction(app, localValue, isCesiumMap, startSync) {
-    let destroyPostRenderListener = () => {};
+  function createEditingAction(
+    app: VcsUiApp,
+    localValue: Ref<ViewpointOptions>,
+    isCesiumMap: Ref<boolean>,
+    startSync: boolean,
+  ): { action: VcsAction; destroy: () => void } {
+    let destroyPostRenderListener = (): void => {};
     let cachedViewpoint = new Viewpoint(localValue.value);
 
-    function setupPostRenderListener() {
+    function setupPostRenderListener(): void {
       destroyPostRenderListener();
       destroyPostRenderListener = app.maps.postRender.addEventListener(
         ({ map }) => {
@@ -261,38 +269,28 @@
 
     return {
       action,
-      destroy: () => {
+      destroy: (): void => {
         destroyMapListener();
         destroyPostRenderListener();
       },
     };
   }
 
-  /**
-   * @param {number} number
-   * @returns {boolean|string}
-   */
-  export function isFiniteNumber(number) {
+  export function isFiniteNumber(number: number): boolean | string {
     return Number.isFinite(number) || 'components.viewpoint.finiteNumber';
   }
 
-  /**
-   * @param {number} number
-   * @returns {boolean|string}
-   */
-  export function isPositiveNumber(number) {
+  export function isPositiveNumber(number: number): boolean | string {
     return (
       (Number.isFinite(number) && number > 0) ||
       'components.viewpoint.positiveNumber'
     );
   }
 
-  /**
-   * @param {import("@vcmap/ui").VcsUiApp} app
-   * @param {import("@vcmap/core").ViewpointOptions} options
-   * @returns {Promise<void>}
-   */
-  export async function gotoViewpointOptions(app, options) {
+  export async function gotoViewpointOptions(
+    app: VcsUiApp,
+    options: ViewpointOptions,
+  ): Promise<void> {
     const viewpoint = new Viewpoint({
       ...options,
       animate: false,
@@ -313,7 +311,7 @@
    * @vue-prop {boolean} hideGeneral - Hide all general settings (name, title, animate).
    * @vue-prop {Array<(v:string)=>(boolean|string)>} nameRules - Optional rules for name input.
    */
-  export default {
+  export default defineComponent({
     name: 'VcsViewpointComponent',
     components: {
       VSheet,
@@ -329,7 +327,7 @@
     },
     props: {
       modelValue: {
-        type: Object,
+        type: Object as PropType<ViewpointOptions>,
         default: Viewpoint.getDefaultOptions(),
       },
       startSync: {
@@ -357,13 +355,13 @@
         default: false,
       },
       nameRules: {
-        type: Array,
+        type: Array as PropType<Array<(v: string) => boolean | string>>,
         default: () => [],
       },
     },
     emits: ['update:modelValue'],
     setup(props, { emit }) {
-      const app = inject('vcsApp');
+      const app = inject('vcsApp') as VcsUiApp;
       const isCesiumMap = ref(
         app.maps.activeMap?.className === CesiumMap.className,
       );
@@ -371,7 +369,7 @@
 
       const title = computed({
         get() {
-          return localValue.value.properties?.title;
+          return localValue.value.properties?.title as string | undefined;
         },
         set(value) {
           if (localValue.value.properties?.title !== value) {
@@ -385,24 +383,12 @@
       });
 
       const hprSliderOptions = {
-        heading: {
-          min: 0,
-          max: 360,
-          step: 1,
-        },
-        pitch: {
-          min: -90,
-          max: 90,
-          step: 1,
-        },
-        roll: {
-          min: 0,
-          max: 360,
-          step: 1,
-        },
+        heading: { min: 0, max: 360, step: 1 },
+        pitch: { min: -90, max: 90, step: 1 },
+        roll: { min: 0, max: 360, step: 1 },
       };
 
-      const updateFromViewAction = {
+      const updateFromViewAction = reactive<VcsAction>({
         name: 'update-viewpoint-from-view-action',
         icon: 'mdi-camera',
         title: 'components.viewpoint.updateFromView',
@@ -410,11 +396,11 @@
           if (app.maps.activeMap) {
             updateLocalValueFromViewpoint(
               localValue,
-              await app.maps.activeMap.getViewpoint(),
+              (await app.maps.activeMap.getViewpoint()) as Viewpoint,
             );
           }
         },
-      };
+      });
 
       const { action: editAction, destroy } = createEditingAction(
         app,
@@ -428,8 +414,9 @@
        */
       const mapWatcher = watch(isCesiumMap, () => {
         if (isCesiumMap.value && !localValue.value.cameraPosition) {
-          localValue.value.cameraPosition =
+          const cameraPosition =
             app.maps.activeMap?.getViewpointSync()?.cameraPosition;
+          localValue.value.cameraPosition = cameraPosition ?? undefined;
         }
       });
 
@@ -450,19 +437,22 @@
         disabledWatcher();
       });
 
-      async function gotoViewpoint() {
+      async function gotoViewpoint(): Promise<void> {
         await gotoViewpointOptions(app, localValue.value);
       }
 
-      async function handleInput(key, value) {
+      async function handleInput(
+        key: 'groundPosition' | 'cameraPosition',
+        value: Coordinate | undefined,
+      ): Promise<void> {
         localValue.value[key] = value;
         if (app.maps.activeMap) {
           if (key === 'groundPosition') {
             localValue.value.cameraPosition = undefined;
           } else if (key === 'cameraPosition') {
-            localValue.value.groundPosition = (
-              await app.maps.activeMap.getViewpoint()
-            ).groundPosition;
+            const { groundPosition } =
+              (await app.maps.activeMap.getViewpoint()) as Viewpoint;
+            localValue.value.groundPosition = groundPosition ?? undefined;
           }
           await gotoViewpoint();
         }
@@ -484,5 +474,5 @@
         cid,
       };
     },
-  };
+  });
 </script>

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

@@ -0,0 +1,160 @@
+import type { Coordinate } from 'ol/coordinate.js';
+import type { PropType, Ref } from 'vue';
+import type { ViewpointOptions } from '@vcmap/core';
+import type { VcsAction } from '../../actions/actionHelper.js';
+import type VcsUiApp from '../../vcsUiApp.js';
+export declare function isFiniteNumber(number: number): boolean | string;
+export declare function isPositiveNumber(number: number): boolean | string;
+export declare function gotoViewpointOptions(app: VcsUiApp, options: ViewpointOptions): Promise<void>;
+/**
+ * @description A component to model @vcmap/core/ViewpointOptions. Stops playing flights on mounted.
+ * @vue-prop {import("@vcmap/core").ViewpointOptions} value - The ViewpointOptions that should be modelled.
+ * @vue-prop {boolean} [startSync=true] - Set false to start in manual edit mode, without camera synchronization.
+ * @vue-prop {boolean} [expandable] - Expandable sections.
+ * @vue-prop {boolean} hideName - Hide name input.
+ * @vue-prop {boolean} hideTitle - Hide title input.
+ * @vue-prop {boolean} hideAnimate - Hide animate & duration input.
+ * @vue-prop {boolean} hideGeneral - Hide all general settings (name, title, animate).
+ * @vue-prop {Array<(v:string)=>(boolean|string)>} nameRules - Optional rules for name input.
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
+    modelValue: {
+        type: PropType<ViewpointOptions>;
+        default: ViewpointOptions;
+    };
+    startSync: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    expandable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideName: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideTitle: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideAnimate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideGeneral: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    nameRules: {
+        type: PropType<Array<(v: string) => boolean | string>>;
+        default: () => never[];
+    };
+}, {
+    isCesiumMap: Ref<boolean>;
+    localValue: Ref<ViewpointOptions>;
+    title: import("vue", { with: { "resolution-mode": "import" } }).WritableComputedRef<string | undefined>;
+    gotoViewpoint: () => Promise<void>;
+    handleInput: (key: "groundPosition" | "cameraPosition", value: Coordinate | undefined) => Promise<void>;
+    updateFromViewAction: {
+        /**
+         * - reactive and translatable name rendered in overflow
+         */
+        name: string;
+        /**
+         * - reactive and translatable title rendered as tooltip
+         */
+        title?: string | undefined;
+        /**
+         * - icon rendered on the button. If no icon provided, item is rendered in overflow
+         */
+        icon?: string | undefined;
+        /**
+         * - callback function is triggered when the button is clicked
+         */
+        callback: import("../../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).ActionCallback;
+        /**
+         * - optional state of button. If active, button is rendered in primary color
+         */
+        active?: boolean | undefined;
+        /**
+         * - optional hasUpdate of button. If true, a yellow notification is rendered next to the button
+         */
+        hasUpdate?: boolean | undefined;
+        /**
+         * - optional background state. If active and background, button is rendered in primary color outlined
+         */
+        background?: boolean | undefined;
+        /**
+         * - optional flag to indicate that the action is disabled
+         */
+        disabled?: boolean | undefined;
+    };
+    editAction: VcsAction;
+    hprSliderOptions: {
+        heading: {
+            min: number;
+            max: number;
+            step: number;
+        };
+        pitch: {
+            min: number;
+            max: number;
+            step: number;
+        };
+        roll: {
+            min: number;
+            max: number;
+            step: number;
+        };
+    };
+    isFiniteNumber: typeof isFiniteNumber;
+    isPositiveNumber: typeof isPositiveNumber;
+    cid: string;
+}, unknown, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<import("vue", { with: { "resolution-mode": "import" } }).ExtractPropTypes<{
+    modelValue: {
+        type: PropType<ViewpointOptions>;
+        default: ViewpointOptions;
+    };
+    startSync: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    expandable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideName: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideTitle: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideAnimate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideGeneral: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    nameRules: {
+        type: PropType<Array<(v: string) => boolean | string>>;
+        default: () => never[];
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    modelValue: ViewpointOptions;
+    expandable: boolean;
+    startSync: boolean;
+    hideName: boolean;
+    hideTitle: boolean;
+    hideAnimate: boolean;
+    hideGeneral: boolean;
+    nameRules: ((v: string) => boolean | string)[];
+}, {}>;

package/src/components/viewpoint/{VcsViewpointEditor.vue → VcsViewpointEditor.ts.vue}

@@ -16,22 +16,23 @@
   </AbstractConfigEditor>
 </template>
 
-<script>
-  import { inject, onUnmounted, ref, toRaw } from 'vue';
+<script lang="ts">
+  import type { PropType } from 'vue';
+  import { defineComponent, inject, onUnmounted, ref, toRaw } from 'vue';
+  import type { ViewpointOptions } from '@vcmap/core';
   import { getLogger } from '@vcsuite/logger';
   import deepEqual from 'fast-deep-equal';
-  import AbstractConfigEditor from '../plugins/AbstractConfigEditor.vue';
+  import AbstractConfigEditor from '../plugins/AbstractConfigEditor.ts.vue';
   import VcsViewpointComponent, {
     gotoViewpointOptions,
-  } from './VcsViewpointComponent.vue';
+  } from './VcsViewpointComponent.ts.vue';
+  import type VcsUiApp from '../../vcsUiApp.js';
 
   /**
    * An editor component for viewpoints using AbstractConfigEditor and VcsViewpointComponent
-   * @vue-prop {() => import("@vcmap/core").ViewpointOptions} getConfig
-   * @vue-prop {(import("@vcmap/core").ViewpointOptions) => Promise<void>} setConfig
-   * @vue-prop {Array<(v:string)=>(boolean|string)>} nameRules - Optional rules for name input.
+   * @vue-prop nameRules Optional rules for name input.
    */
-  export default {
+  export default defineComponent({
     name: 'VcsViewpointEditor',
     components: {
       AbstractConfigEditor,
@@ -39,58 +40,58 @@
     },
     props: {
       getConfig: {
-        type: Function,
+        type: Function as PropType<() => ViewpointOptions>,
         required: true,
       },
       setConfig: {
-        type: Function,
+        type: Function as PropType<(config: ViewpointOptions) => Promise<void>>,
         required: true,
       },
       nameRules: {
-        type: Array,
+        type: Array as PropType<Array<(v: string) => boolean | string>>,
         default: () => [],
       },
     },
     emits: ['close'],
     setup(props, { emit }) {
-      const app = inject('vcsApp');
+      const app = inject('vcsApp') as VcsUiApp;
       const localConfig = ref(props.getConfig());
       const originalConfig = structuredClone(props.getConfig());
       let cancel = false;
 
-      async function gotoViewpoint() {
+      async function gotoViewpoint(): Promise<void> {
         await gotoViewpointOptions(app, localConfig.value);
       }
 
-      async function reset() {
+      async function reset(): Promise<void> {
         localConfig.value = props.getConfig();
         await gotoViewpoint();
       }
 
-      gotoViewpoint().catch((err) =>
-        getLogger('ViewpointEditor.vue').error(err),
-      );
+      gotoViewpoint().catch((err: unknown) => {
+        getLogger('ViewpointEditor.vue').error(String(err));
+      });
 
-      onUnmounted(() => {
+      onUnmounted(async () => {
         if (!cancel && !deepEqual(originalConfig, toRaw(localConfig.value))) {
-          props.setConfig(localConfig.value);
+          await props.setConfig(localConfig.value);
         }
       });
 
       return {
         localConfig,
-        apply() {
+        reset,
+        apply(): void {
           emit('close');
         },
-        async cancel() {
+        async cancel(): Promise<void> {
           await reset();
           cancel = true;
           emit('close');
         },
-        reset,
       };
     },
-  };
+  });
 </script>
 
 <style scoped></style>

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

@@ -0,0 +1,57 @@
+import type { PropType } from 'vue';
+import type { ViewpointOptions } from '@vcmap/core';
+/**
+ * An editor component for viewpoints using AbstractConfigEditor and VcsViewpointComponent
+ * @vue-prop nameRules Optional rules for name input.
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
+    getConfig: {
+        type: PropType<() => ViewpointOptions>;
+        required: true;
+    };
+    setConfig: {
+        type: PropType<(config: ViewpointOptions) => Promise<void>>;
+        required: true;
+    };
+    nameRules: {
+        type: PropType<Array<(v: string) => boolean | string>>;
+        default: () => never[];
+    };
+}, {
+    localConfig: import("vue", { with: { "resolution-mode": "import" } }).Ref<{
+        type?: string | undefined;
+        name?: string | undefined;
+        properties?: Record<string, unknown> | undefined;
+        cameraPosition?: number[] | undefined;
+        groundPosition?: number[] | undefined;
+        distance?: number | undefined;
+        heading?: number | undefined;
+        pitch?: number | undefined;
+        roll?: number | undefined;
+        animate?: boolean | undefined;
+        duration?: number | undefined;
+        easingFunctionName?: string | undefined;
+    }>;
+    reset: () => Promise<void>;
+    apply(): void;
+    cancel(): Promise<void>;
+}, unknown, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, "close"[], "close", import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<import("vue", { with: { "resolution-mode": "import" } }).ExtractPropTypes<{
+    getConfig: {
+        type: PropType<() => ViewpointOptions>;
+        required: true;
+    };
+    setConfig: {
+        type: PropType<(config: ViewpointOptions) => Promise<void>>;
+        required: true;
+    };
+    nameRules: {
+        type: PropType<Array<(v: string) => boolean | string>>;
+        default: () => never[];
+    };
+}>> & {
+    onClose?: ((...args: any[]) => any) | undefined;
+}, {
+    nameRules: ((v: string) => boolean | string)[];
+}, {}>;

package/src/contentTree/LayerSwap.vue

@@ -26,8 +26,8 @@
     WMSLayer,
   } from '@vcmap/core';
   import { getLogger } from '@vcsuite/logger';
-  import VcsHelp from '../components/notification/VcsHelp.vue';
-  import VcsTreeview from '../components/lists/VcsTreeview.vue';
+  import VcsHelp from '../components/notification/VcsHelp.ts.vue';
+  import VcsTreeview from '../components/lists/VcsTreeview.ts.vue';
   import WMSGroupContentTreeItem from './wmsGroupContentTreeItem.js';
   import {
     moveItem,