@vcmap/ui 6.3.10 → 7.0.0-rc.1

package/src/components/extent/{VcsExtent.vue → VcsExtent.ts.vue}

@@ -3,7 +3,7 @@
     <v-row no-gutters v-if="modelValue.projection">
       <v-col :cols="firstCols">
         <VcsLabel :html-for="`${cid}-projection`">
-          {{ $t('components.extent.projection') }}
+          {{ $st('components.extent.projection') }}
         </VcsLabel>
       </v-col>
       <v-col>
@@ -20,14 +20,14 @@
       :disabled="disabled"
       :extent="extent"
       :axis-rules="[
-        [(v) => checkInput(v, max[0])],
-        [(v) => checkInput(v, max[1])],
+        [(v: number) => checkInput(v, max[0])],
+        [(v: number) => checkInput(v, max[1])],
       ]"
     >
       <template #prepend>
         <v-col :cols="firstCols">
           <VcsLabel>
-            {{ $t('components.extent.min') }}
+            {{ $st('components.extent.min') }}
           </VcsLabel>
         </v-col>
       </template>
@@ -38,14 +38,14 @@
       :disabled="disabled"
       :extent="extent"
       :axis-rules="[
-        [(v) => checkInput(min[0], v)],
-        [(v) => checkInput(min[1], v)],
+        [(v: number) => checkInput(min[0], v)],
+        [(v: number) => checkInput(min[1], v)],
       ]"
     >
       <template #prepend>
         <v-col :cols="firstCols">
           <VcsLabel>
-            {{ $t('components.extent.max') }}
+            {{ $st('components.extent.max') }}
           </VcsLabel>
         </v-col>
       </template>
@@ -53,17 +53,19 @@
   </v-container>
 </template>
 
-<script>
-  import { computed, toRaw } from 'vue';
+<script lang="ts">
+  import type { PropType, WritableComputedRef } from 'vue';
+  import { computed, toRaw, defineComponent } from 'vue';
   import { VCol, VContainer, VRow } from 'vuetify/components';
+  import type { ExtentOptions } from '@vcmap/core';
   import { Extent, Projection } from '@vcmap/core';
-  import VcsLabel from '../form-inputs-controls/VcsLabel.vue';
-  import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
-  import VcsCoordinate from '../form-inputs-controls/VcsCoordinate.vue';
+  import VcsLabel from '../form-inputs-controls/VcsLabel.ts.vue';
+  import VcsTextField from '../form-inputs-controls/VcsTextField.ts.vue';
+  import VcsCoordinate from '../form-inputs-controls/VcsCoordinate.ts.vue';
   import { useProxiedComplexModel } from '../modelHelper.js';
   import { useComponentId } from '../composables.js';
 
-  function checkInput(min, max) {
+  function checkInput(min: number, max: number): boolean | string {
     return min < max || 'components.extent.invalid';
   }
 
@@ -73,7 +75,7 @@
    * @vue-prop {boolean} [disabled=false] - Disable coordinate input.
    * @vue-prop {number} [firstCols=4] - Property to set the column distribution. Default is 4 (one-third/two-third). Use 6 for half-half.
    */
-  export default {
+  export default defineComponent({
     name: 'VcsExtent',
     components: {
       VcsCoordinate,
@@ -86,7 +88,7 @@
     inheritAttrs: false,
     props: {
       modelValue: {
-        type: Object,
+        type: Object as PropType<ExtentOptions>,
         default: () => new Extent().toJSON(),
       },
       disabled: {
@@ -110,15 +112,21 @@
         Infinity,
       ];
 
-      const getCoordinate = (start, end = 4) =>
-        computed({
+      const getCoordinate = (
+        start: number,
+        end = 4,
+      ): WritableComputedRef<number[]> =>
+        computed<number[]>({
           get() {
-            return localValue.value.coordinates.slice(start, end);
+            const coordinates = localValue.value.coordinates ?? [0, 0, 0, 0];
+            return coordinates.slice(start, end);
           },
           set(value) {
             const clone = structuredClone(toRaw(localValue.value));
-            clone.coordinates[start] = value[0];
-            clone.coordinates[end - 1] = value[1];
+            const coordinates = [...(clone.coordinates ?? [0, 0, 0, 0])];
+            coordinates[start] = value[0];
+            coordinates[end - 1] = value[1];
+            clone.coordinates = coordinates;
             if (Extent.validateOptions(clone)) {
               localValue.value = clone;
             }
@@ -135,7 +143,7 @@
         cid,
       };
     },
-  };
+  });
 </script>
 
 <style scoped></style>

package/src/components/extent/VcsExtent.ts.vue.d.ts

@@ -0,0 +1,50 @@
+import type { PropType, WritableComputedRef } from 'vue';
+import type { ExtentOptions } from '@vcmap/core';
+declare function checkInput(min: number, max: number): boolean | string;
+/**
+ * An input for modelling @vcmap/core ExtentOptions
+ * @vue-prop {import("@vcmap/core").ExtentOptions} [modelValue] - the extent options to be modeled.
+ * @vue-prop {boolean} [disabled=false] - Disable coordinate input.
+ * @vue-prop {number} [firstCols=4] - Property to set the column distribution. Default is 4 (one-third/two-third). Use 6 for half-half.
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
+    modelValue: {
+        type: PropType<ExtentOptions>;
+        default: () => ExtentOptions;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    firstCols: {
+        type: NumberConstructor;
+        default: number;
+    };
+}, {
+    min: WritableComputedRef<number[]>;
+    max: WritableComputedRef<number[]>;
+    checkInput: typeof checkInput;
+    extent: import("ol/extent.js", { with: { "resolution-mode": "import" } }).Extent;
+    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<ExtentOptions>;
+        default: () => ExtentOptions;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    firstCols: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    disabled: boolean;
+    modelValue: ExtentOptions;
+    firstCols: number;
+}, {}>;

package/src/components/extent/{VcsExtentEditor.vue → VcsExtentEditor.ts.vue}

@@ -13,23 +13,26 @@
   </VcsFormSection>
 </template>
 
-<script>
-  import { computed, inject, onUnmounted } from 'vue';
+<script lang="ts">
+  import type { PropType } from 'vue';
+  import { computed, defineComponent, inject, onUnmounted } from 'vue';
+  import type { ExtentOptions } from '@vcmap/core';
   import { Extent } from '@vcmap/core';
   import { useProxiedComplexModel } from '../modelHelper.js';
   import { setupExtentComponentActions } from '../../actions/extentActions.js';
-  import VcsExtent from './VcsExtent.vue';
-  import VcsFormSection from '../section/VcsFormSection.vue';
+  import VcsExtent from './VcsExtent.ts.vue';
+  import VcsFormSection from '../section/VcsFormSection.ts.vue';
+  import type VcsUiApp from '../../vcsUiApp.js';
 
   /**
    * A VcsFormSection with actions to draw and edit an extent
    * Uses VcsExtent for editing the extent options via input field
    * @vue-prop {import("@vcmap/core").ExtentOptions} [modelValue] - the extent options to be modeled.
    * @vue-prop {boolean} [disabled=false] - Disable coordinate input.
-   * @vue-prop {string} [heading='component.extent.title] - Header of the form section
+   * @vue-prop {string} [heading='components.extent.title'] - Header of the form section
    * @vue-prop {boolean} [showExtentOnStartup=false] - Whether to activate the extent layer on startup
    */
-  export default {
+  export default defineComponent({
     name: 'VcsExtentEditor',
     components: {
       VcsFormSection,
@@ -38,7 +41,7 @@
     inheritAttrs: false,
     props: {
       modelValue: {
-        type: Object,
+        type: Object as PropType<ExtentOptions>,
         default: () => new Extent().toJSON(),
       },
       disabled: {
@@ -56,7 +59,7 @@
     },
     emits: ['update:modelValue'],
     setup(props, { emit }) {
-      const app = inject('vcsApp');
+      const app = inject('vcsApp') as VcsUiApp;
       const localValue = useProxiedComplexModel(props, 'modelValue', emit);
 
       const extent = computed({
@@ -83,7 +86,7 @@
         actions,
       };
     },
-  };
+  });
 </script>
 
 <style scoped></style>

package/src/components/extent/VcsExtentEditor.ts.vue.d.ts

@@ -0,0 +1,57 @@
+import type { PropType } from 'vue';
+import type { ExtentOptions } from '@vcmap/core';
+/**
+ * A VcsFormSection with actions to draw and edit an extent
+ * Uses VcsExtent for editing the extent options via input field
+ * @vue-prop {import("@vcmap/core").ExtentOptions} [modelValue] - the extent options to be modeled.
+ * @vue-prop {boolean} [disabled=false] - Disable coordinate input.
+ * @vue-prop {string} [heading='components.extent.title'] - Header of the form section
+ * @vue-prop {boolean} [showExtentOnStartup=false] - Whether to activate the extent layer on startup
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
+    modelValue: {
+        type: PropType<ExtentOptions>;
+        default: () => ExtentOptions;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    heading: {
+        type: StringConstructor;
+        default: string;
+    };
+    showExtentOnStartup: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    localValue: import("vue", { with: { "resolution-mode": "import" } }).Ref<ExtentOptions>;
+    actions: import("../../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction[];
+}, 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<ExtentOptions>;
+        default: () => ExtentOptions;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    heading: {
+        type: StringConstructor;
+        default: string;
+    };
+    showExtentOnStartup: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    disabled: boolean;
+    modelValue: ExtentOptions;
+    heading: string;
+    showExtentOnStartup: boolean;
+}, {}>;

package/src/components/flight/{VcsFlightAnchorsComponent.vue → VcsFlightAnchorsComponent.ts.vue}

@@ -8,12 +8,12 @@
   >
     <v-container class="py-0 px-0">
       <v-sheet v-if="items.length < 1" class="ma-2 pl-2">
-        <p>{{ $t('components.flight.noAnchor') }}</p>
+        <p>{{ $st('components.flight.noAnchor') }}</p>
         <div class="d-flex justify-center">
           <VcsButton
             :icon="addAnchorAction.icon"
             :tooltip="addAnchorAction.title"
-            @click.stop="addAnchorAction.callback()"
+            @click.stop="addAnchorAt()"
           />
         </div>
       </v-sheet>
@@ -31,7 +31,7 @@
             <div class="duration-input">
               <VcsTextField
                 v-if="showDuration(index)"
-                v-model.number="item.duration"
+                v-model="(item as FlightDurationListItem).duration as number"
                 :hide-spin-buttons="true"
                 type="number"
                 unit="s"
@@ -49,7 +49,7 @@
             <VcsButton
               :icon="addAnchorAction.icon"
               :tooltip="addAnchorAction.title"
-              @click.stop="addAnchorAction.callback(index + 1)"
+              @click.stop="addAnchorAt(index + 1)"
               class="z-index-99 mx-auto add-in-button"
             />
           </div>
@@ -59,57 +59,87 @@
   </VcsFormSection>
 </template>
 
-<script>
-  import { computed, inject, onMounted, onUnmounted, ref } from 'vue';
+<script lang="ts">
+  import type { WritableComputedRef } from 'vue';
+  import {
+    computed,
+    defineComponent,
+    inject,
+    onMounted,
+    onUnmounted,
+    reactive,
+    ref,
+  } from 'vue';
   import { VContainer, VSheet, VSpacer } from 'vuetify/components';
   import {
     anchorFromViewpoint,
     anchorToViewpoint,
     Viewpoint,
   } from '@vcmap/core';
+  import type {
+    FlightAnchor,
+    IndexedCollection,
+    ViewpointOptions,
+  } from '@vcmap/core';
   import { Cartesian3 } from '@vcmap-cesium/engine';
   import { createToggleAction } from '../../actions/actionHelper.js';
-  import VcsFormSection from '../section/VcsFormSection.vue';
-  import VcsList from '../lists/VcsList.vue';
-  import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
-  import VcsButton from '../buttons/VcsButton.vue';
+  import type {
+    VcsAction,
+    DestroyableAction,
+  } from '../../actions/actionHelper.js';
+  import VcsFormSection from '../section/VcsFormSection.ts.vue';
+  import VcsList from '../lists/VcsList.ts.vue';
+  import VcsTextField from '../form-inputs-controls/VcsTextField.ts.vue';
+  import VcsButton from '../buttons/VcsButton.ts.vue';
   import { moveItem } from '../lists/dragHelper.js';
+  import type { ItemMovedEvent } from '../lists/dragHelper.js';
+  import type { VcsListItem } from '../lists/VcsListItemComponent.ts.vue';
   import CollectionComponentClass from '../../manager/collectionManager/collectionComponentClass.js';
   import { WindowSlot } from '../../manager/window/windowManager.js';
-  import VcsViewpointEditor from '../viewpoint/VcsViewpointEditor.vue';
+  import VcsViewpointEditor from '../viewpoint/VcsViewpointEditor.ts.vue';
   import { vcsAppSymbol } from '../../pluginHelper.js';
   import { createFlightVisualizationAction } from '../../actions/flightActions.js';
   import { getProvidedFlightInstance } from './composables.js';
+  import type VcsUiApp from '../../vcsUiApp.js';
+
+  type FlightDurationListItem = VcsListItem & {
+    duration?: number | WritableComputedRef<number>;
+  };
 
   /**
    * calculate duration between two anchor based on speed and distance
-   * @param {import("@vcmap/core").FlightAnchor} anchor1
-   * @param {import("@vcmap/core").FlightAnchor} anchor2
-   * @param {number} [speed=300] velocity in m/s
-   * @returns {number}
+   * @param speed velocity in m/s
    */
-  function calculateDuration(anchor1, anchor2, speed = 300) {
+  function calculateDuration(
+    anchor1: FlightAnchor,
+    anchor2: FlightAnchor,
+    speed = 300,
+  ): number {
     return (
       Cartesian3.distance(
-        Cartesian3.fromDegrees(...anchor1.coordinate),
-        Cartesian3.fromDegrees(...anchor2.coordinate),
+        Cartesian3.fromDegrees(
+          anchor1.coordinate[0],
+          anchor1.coordinate[1],
+          anchor1.coordinate[2],
+        ),
+        Cartesian3.fromDegrees(
+          anchor2.coordinate[0],
+          anchor2.coordinate[1],
+          anchor2.coordinate[2],
+        ),
       ) / speed || 1
     );
   }
 
-  /**
-   * @param {import("@src/vcsUiApp.js").default} app
-   * @param {import("@vcmap/core").IndexedCollection<import("@vcmap/core").FlightAnchor>} collection
-   * @returns {import("../../actions/actionHelper.js").VcsAction}
-   */
-  function createAddAnchorAction(app, collection) {
-    return {
-      name: 'components.flight.addAnchor',
-      title: 'components.flight.addAnchor',
-      icon: '$vcsPlus',
-      callback(index = 0) {
-        const viewpoint = app.maps.activeMap.getViewpointSync();
-        const anchor = anchorFromViewpoint(viewpoint);
+  function addAnchorToCollection(
+    collection: IndexedCollection<FlightAnchor>,
+    app: VcsUiApp,
+    index = 0,
+  ): void {
+    const viewpoint = app.maps.activeMap?.getViewpointSync();
+    if (viewpoint) {
+      const anchor = anchorFromViewpoint(viewpoint);
+      if (anchor) {
         anchor.title = `Viewpoint ${collection.size + 1}`;
         if (index > 0) {
           const prevAnchor = collection.get(index - 1);
@@ -120,19 +150,31 @@
           }
         }
         collection.add(anchor, index);
+      }
+    }
+  }
+
+  function createAddAnchorAction(
+    app: VcsUiApp,
+    collection: IndexedCollection<FlightAnchor>,
+  ): VcsAction {
+    return reactive({
+      name: 'components.flight.addAnchor',
+      title: 'components.flight.addAnchor',
+      icon: '$vcsPlus',
+      callback() {
+        addAnchorToCollection(collection, app);
       },
-    };
+    });
   }
 
-  /**
-   * @param {import("@src/vcsUiApp.js").default} app
-   * @param {import("@vcmap/core").FlightAnchor} item
-   * @param {import("@vcmap/core").IndexedCollection<import("@vcmap/core").FlightAnchor>} collection
-   * @param {string} parentId
-   * @param {string} owner
-   * @returns {{action:import("../../actions/actionHelper.js").VcsAction, destroy: ()=>void}}
-   */
-  function createEditAnchorAction(app, item, collection, parentId, owner) {
+  function createEditAnchorAction(
+    app: VcsUiApp,
+    item: FlightAnchor,
+    collection: IndexedCollection<FlightAnchor>,
+    parentId: string | undefined,
+    owner: string | symbol,
+  ): DestroyableAction {
     const { action, destroy } = createToggleAction(
       {
         name: 'edit-anchor',
@@ -152,12 +194,13 @@
           getConfig() {
             return anchorToViewpoint(item).toJSON();
           },
-          setConfig(config) {
+          setConfig(config: ViewpointOptions) {
             if (config) {
               const idx = collection.indexOf(item);
               // avoid shadows by remove
               collection.remove(item);
-              collection.add(anchorFromViewpoint(new Viewpoint(config)), idx);
+
+              collection.add(anchorFromViewpoint(new Viewpoint(config))!, idx);
             }
             return Promise.resolve();
           },
@@ -171,39 +214,35 @@
     return { action, destroy };
   }
 
-  /**
-   * @param {import("@src/vcsUiApp.js").default} app
-   * @param {import("@vcmap/core").FlightAnchor} item
-   * @returns {import("../../actions/actionHelper.js").VcsAction}
-   */
-  function createZoomToAnchorAction(app, item) {
-    return {
+  function createZoomToAnchorAction(
+    app: VcsUiApp,
+    item: FlightAnchor,
+  ): VcsAction {
+    return reactive({
       name: 'components.flight.zoomToAnchor',
       title: 'components.flight.zoomToAnchor',
-      callback() {
+      async callback() {
         const viewpoint = anchorToViewpoint(item);
-        app.maps.activeMap?.gotoViewpoint(viewpoint);
+        await app.maps.activeMap?.gotoViewpoint(viewpoint);
       },
-    };
+    });
   }
 
-  /**
-   * @param {import("@vcmap/core").FlightAnchor} item
-   * @param {import("@vcmap/core").IndexedCollection<import("@vcmap/core").FlightAnchor>} collection
-   * @returns {import("../../actions/actionHelper.js").VcsAction}
-   */
-  function creatRemoveAnchorAction(item, collection) {
-    return {
+  function createRemoveAnchorAction(
+    item: FlightAnchor,
+    collection: IndexedCollection<FlightAnchor>,
+  ): VcsAction {
+    return reactive({
       name: 'components.flight.removeAnchor',
       title: 'components.flight.removeAnchor',
       callback() {
         collection.remove(item);
       },
-    };
+    });
   }
 
-  export function durationRule(value) {
-    const v = Number.parseFloat(value);
+  export function durationRule(value: number | string): boolean | string {
+    const v = Number.parseFloat(String(value));
     if (Number.isFinite(v) && v > 0) {
       return true;
     }
@@ -217,7 +256,7 @@
    * @vue-prop {string} [parentId] - id of the window, the VcsFlightComponent is used in
    * @vue-prop {string} [owner] - owner of the window, e.g. a plugin name
    */
-  export default {
+  export default defineComponent({
     name: 'VcsFlightAnchorsComponent',
     components: {
       VcsButton,
@@ -243,7 +282,7 @@
       },
     },
     setup({ parentId, owner }) {
-      const app = inject('vcsApp');
+      const app = inject('vcsApp') as VcsUiApp;
       const flightInstance = getProvidedFlightInstance();
       const loop = ref(flightInstance.loop);
       const loopChangedListener =
@@ -261,7 +300,7 @@
           }
         });
 
-      let flightVis;
+      let flightVis: DestroyableAction | undefined;
 
       const collectionComponent = new CollectionComponentClass(
         {
@@ -273,23 +312,29 @@
       );
 
       collectionComponent.addItemMapping({
-        mappingFunction: (item, c, listItem) => {
+        mappingFunction: (item, _c, listItem) => {
           const { action: editAction, destroy: editDestroy } =
-            createEditAnchorAction(app, item, c.collection, parentId, owner);
+            createEditAnchorAction(
+              app,
+              item,
+              flightInstance.anchors,
+              parentId,
+              owner,
+            );
           listItem.actions = [
             editAction,
             createZoomToAnchorAction(app, item),
-            creatRemoveAnchorAction(item, c.collection),
+            createRemoveAnchorAction(item, flightInstance.anchors),
           ];
           const localDuration = ref(item.duration);
-          listItem.duration = computed({
-            get() {
-              return localDuration.value;
-            },
-            set(value) {
-              if (Number.isFinite(value) && value > 0) {
-                item.duration = value;
-                localDuration.value = value;
+
+          (listItem as FlightDurationListItem).duration = computed({
+            get: () => localDuration.value,
+            set(value: number | string) {
+              const v = Number.parseFloat(String(value));
+              if (Number.isFinite(v) && v > 0) {
+                item.duration = v;
+                localDuration.value = v;
               }
             },
           });
@@ -304,12 +349,8 @@
 
       onMounted(async () => {
         flightVis = await createFlightVisualizationAction(app, flightInstance);
-        collectionComponent.addActions([
-          {
-            action: flightVis.action,
-            owner,
-          },
-        ]);
+
+        collectionComponent.addActions([{ action: flightVis.action, owner }]);
       });
 
       onUnmounted(() => {
@@ -320,20 +361,24 @@
 
       const addAnchorAction = createAddAnchorAction(
         app,
-        collectionComponent.collection,
+        flightInstance.anchors,
       );
+      const addAnchorAt = (index = 0): void => {
+        addAnchorToCollection(flightInstance.anchors, app, index);
+      };
 
       return {
         addAnchorAction,
+        addAnchorAt,
         title: collectionComponent.title,
         items: collectionComponent.items,
         draggable: collectionComponent.draggable,
         actions: collectionComponent.getActions(),
-        move(event) {
-          moveItem(collectionComponent.collection, event);
+        move(event: ItemMovedEvent): void {
+          moveItem(flightInstance.anchors, event);
         },
         durationRule,
-        showDuration(index) {
+        showDuration(index: number): boolean {
           if (collectionComponent.items.value.length - 1 === index) {
             return loop.value;
           }
@@ -341,8 +386,9 @@
         },
       };
     },
-  };
+  });
 </script>
+
 <style scoped lang="scss">
   :deep(.v-list-item) {
     padding: 0 8px 0 16px;