@vcmap/ui 6.2.0-rc.2 → 6.2.0-rc.4

package/src/components/flight/VcsFlightAnchorsComponent.vue

@@ -58,6 +58,7 @@
     </v-container>
   </VcsFormSection>
 </template>
+
 <script>
   import { computed, inject, onMounted, onUnmounted, ref } from 'vue';
   import { VContainer, VSheet, VSpacer } from 'vuetify/components';

package/src/components/flight/VcsFlightPlayer.vue

@@ -1,6 +1,15 @@
 <template>
   <v-container class="py-0 px-1 vcs-flight-player">
-    <VcsLabel html-for="player">{{ $t('flight.player') }}</VcsLabel>
+    <v-row no-gutters class="d-flex align-center">
+      <VcsLabel html-for="player">{{ $t('flight.player') }}</VcsLabel>
+      <v-row class="d-flex justify-end px-1 gc-2" no-gutters>
+        <VcsActionButtonList
+          overflow-icon="$vcsShare"
+          :actions="recordingActions"
+          :disabled="!isCurrentPlayer || disabled"
+        />
+      </v-row>
+    </v-row>
     <VcsSlider
       v-if="clock"
       type="number"
@@ -32,22 +41,22 @@
     </div>
   </v-container>
 </template>
+
 <script>
   import { inject, onMounted, onUnmounted, ref } from 'vue';
-  import { VContainer } from 'vuetify/components';
+  import { VContainer, VRow } from 'vuetify/components';
   import VcsSlider from '../form-inputs-controls/VcsSlider.vue';
   import VcsLabel from '../form-inputs-controls/VcsLabel.vue';
   import VcsButton from '../buttons/VcsButton.vue';
-  import { createFlightPlayerActions } from '../../actions/flightActions.js';
+  import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
+  import {
+    createFlightMovieActions,
+    createFlightPlayerActions,
+  } from '../../actions/flightActions.js';
   import { getProvidedFlightInstance } from './composables.js';
 
   function getDefaultClock() {
-    return {
-      startTime: 0,
-      endTime: 0,
-      currentTime: 0,
-      times: [],
-    };
+    return { startTime: 0, endTime: 0, currentTime: 0, times: [] };
   }
 
   /**
@@ -70,18 +79,18 @@
   export default {
     name: 'VcsFlightPlayer',
     components: {
-      VcsLabel,
-      VcsButton,
       VContainer,
+      VRow,
+      VcsActionButtonList,
+      VcsButton,
+      VcsLabel,
       VcsSlider,
     },
-    props: {
-      disabled: {
-        type: Boolean,
-        default: false,
-      },
-    },
+    props: { disabled: { type: Boolean, default: false } },
     setup() {
+      /**
+       * @type {import("../../vcsUiApp.js").default}
+       */
       const app = inject('vcsApp');
       const flightInstance = getProvidedFlightInstance();
       const clock = ref(getDefaultClock());
@@ -113,6 +122,9 @@
         }
       }
 
+      const { actions: recordingActions, destroy: destroyRecordingActions } =
+        createFlightMovieActions(app, flightInstance);
+
       onMounted(async () => {
         flightInstancePlayer =
           await app.flights.setPlayerForFlight(flightInstance);
@@ -129,12 +141,14 @@
       onUnmounted(() => {
         destroy();
         playerChangedListener();
+        destroyRecordingActions();
       });
 
       return {
         clock,
         actions,
         isCurrentPlayer,
+        recordingActions,
         clockTime(seconds) {
           const mins = Math.floor(seconds / 60);
           const secs = Math.floor(seconds % 60);

package/src/components/flight/VcsFlightPlayer.vue.d.ts

@@ -12,6 +12,7 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     actions: import("../../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction[];
     isCurrentPlayer: import("vue").Ref<boolean>;
+    recordingActions: import("../../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction[];
     clockTime(seconds: any): string;
     setTime(seconds: any): void;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{

package/src/components/plugins/VcsLoadingOverlay.vue

@@ -0,0 +1,138 @@
+<template>
+  <v-dialog
+    v-model="show"
+    class="vcs-loading-overlay"
+    :max-width="maxWidth"
+    :persistent="persistent"
+  >
+    <v-card class="pa-1">
+      <v-card-title v-if="title" class="title loading">
+        {{ $t(title) }}
+      </v-card-title>
+      <v-card-text v-if="text" class="px-4">
+        {{ $t(text) }}
+      </v-card-text>
+      <div class="d-flex justify-end px-4" v-if="hasProgress">
+        {{ localProgress }}%
+      </div>
+      <div class="px-4 pb-1 pt-2">
+        <v-progress-linear
+          :model-value="localProgress"
+          :indeterminate="!hasProgress"
+          rounded
+        />
+      </div>
+      <template #actions v-if="cancellable">
+        <div class="pa-2">
+          <VcsFormButton @click="show = false">
+            {{ $t('components.cancel') }}
+          </VcsFormButton>
+        </div>
+      </template>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+  import {
+    VDialog,
+    VCard,
+    VCardText,
+    VProgressLinear,
+    VCardTitle,
+  } from 'vuetify/components';
+  import { computed, ref, watch } from 'vue';
+  import VcsFormButton from '../buttons/VcsFormButton.vue';
+
+  /**
+   * @description Basic overlay to display a progress bar on a VCard, with optional text and cancel button.
+   * @vue-prop {import("vue").Ref<number>|undefined} [progress] - The current progress value, between 0 and 1.
+   * @vue-prop {string} [title] - The title of the overlay. Will be translated.
+   * @vue-prop {string} [text=''] - Optional text to display in the overlay. Will be translated.
+   * @vue-prop {boolean} [cancellable=true] - Whether the overlay can be cancelled by the user.
+   * @vue-prop {string|number} [maxWidth='500'] - Optional max-width for the dialog.
+   * @vue-prop {boolean} [persistent=true] - Whether the dialog should be persistent (not dismissible by clicking outside).
+   */
+  export default {
+    name: 'VcsLoadingOverlay',
+    components: {
+      VDialog,
+      VCard,
+      VCardTitle,
+      VCardText,
+      VProgressLinear,
+      VcsFormButton,
+    },
+    props: {
+      progress: {
+        type: [Object, Number, undefined],
+        default: undefined,
+      },
+      title: {
+        type: String,
+        default: '',
+      },
+      text: {
+        type: String,
+        default: '',
+      },
+      cancellable: {
+        type: Boolean,
+        default: true,
+      },
+      maxWidth: {
+        type: [String, Number],
+        default: '500px',
+      },
+      persistent: {
+        type: Boolean,
+        default: true,
+      },
+    },
+    emits: ['cancel'],
+    setup(props, { emit }) {
+      const show = ref(true);
+      watch(show, () => {
+        if (!show.value) {
+          emit('cancel');
+        }
+      });
+      return {
+        show,
+        hasProgress: props.progress !== undefined,
+        localProgress: computed(() => {
+          if (props.progress && props.progress.value !== undefined) {
+            return Math.round(props.progress.value * 100);
+          }
+          return 0;
+        }),
+      };
+    },
+  };
+</script>
+
+<style scoped lang="scss">
+  .title {
+    font-size: calc(var(--v-vcs-font-size) * 1.2);
+  }
+
+  .loading:after {
+    content: ' .';
+    animation: dots 2s steps(4, end) infinite;
+  }
+  @keyframes dots {
+    0%,
+    100% {
+      content: '';
+    }
+    25% {
+      content: '.';
+    }
+    50% {
+      content: '..';
+    }
+    75% {
+      content: '...';
+    }
+  }
+</style>

package/src/components/plugins/VcsLoadingOverlay.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
+export default _default;

package/src/components/plugins/{AbstractWorkspaceItemCreator.vue → VcsWorkspaceWrapper.vue}

@@ -1,5 +1,5 @@
 <template>
-  <v-container class="pa-0 abstract-workspace-item-creator">
+  <v-container class="pa-0 vcs-workspace-wrapper">
     <slot />
     <div v-if="showFooter">
       <v-divider class="mt-3" />
@@ -42,7 +42,7 @@
    * @vue-prop {boolean} [disableAdd=false] - Flag to render add button disabled.
    * @vue-prop {boolean} [tooltipAdd='components.addToMyWorkspace'] - Option to change the add button tooltip.
    * @vue-prop {boolean} [disableNew=false] - Flag to render new button disabled.
-   * @vue-prop {boolean} [tooltipNew''] - Option to change the add a tooltip to the new button.
+   * @vue-prop {boolean} [tooltipNew=''] - Option to change the add a tooltip to the new button.
    * @vue-prop {Array<VcsAction>} [actions] - Optional actions rendered as ActionButtonList in the footer.
    * @vue-prop {string} [newButtonTitle='components.new'] - Option to change the new button title, e.g. to 'components.apply'.
    * @vue-event {Event} addClicked - Event fired on clicking the reset button.
@@ -50,7 +50,7 @@
    * @vue-slot secondaryButton An optionnal named slot to add a secondary button to the footer, rendered filled on the left of the new button.
    */
   export default {
-    name: 'AbstractWorkspaceItemCreator',
+    name: 'VcsWorkspaceWrapper',
     components: {
       VContainer,
       VDivider,

package/src/components/vector-properties/VcsFeatureEditingWindow.vue

@@ -13,7 +13,12 @@
           :feature-properties="featureProperties"
           :allow-z-input="is3D"
         />
-        <div v-else class="px-1 py-1">
+        <div v-else-if="showInputs" class="py-1">
+          <VcsFeatureInputEditor
+            :is3-d="is3D && featureProperties.altitudeMode === 'absolute'"
+          />
+        </div>
+        <div v-else class="py-1">
           {{ $t('components.editor.modifyInfo') }}
         </div>
       </div>
@@ -67,6 +72,7 @@
   } from './VcsVectorPropertiesComponent.vue';
   import VcsFormSection from '../section/VcsFormSection.vue';
   import VcsSnapTo from './VcsSnapTo.vue';
+  import VcsFeatureInputEditor from './VcsFeatureInputEditor.vue';
 
   /**
    * @typedef {Object} EditorManager
@@ -150,6 +156,7 @@
       VSheet,
       VcsFormSection,
       VcsVectorPropertiesComponent,
+      VcsFeatureInputEditor,
       VcsFeatureStyleComponent,
     },
     props: {
@@ -186,6 +193,10 @@
         type: Boolean,
         default: true,
       },
+      showInputEditor: {
+        type: Boolean,
+        default: false,
+      },
     },
     setup(props) {
       const vcsApp = inject('vcsApp');
@@ -463,8 +474,16 @@
         availableVectorProperties,
         is3D,
         is2DFeature,
+        isGeometryEditing,
         updateFeatureProperties,
         defaultVectorProperties: VectorProperties.getDefaultOptions(),
+        showInputs: computed(
+          () =>
+            !currentTransformationMode.value &&
+            props.showInputEditor &&
+            features.value.length === 1 &&
+            features.value[0]?.getGeometry()?.getType() === 'Point',
+        ),
       };
     },
   };

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

@@ -42,6 +42,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    showInputEditor: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     featureProperties: import("vue").ShallowRef<any>;
     session: import("vue").ShallowRef<import("@vcmap/core", { with: { "resolution-mode": "import" } }).SelectFeaturesSession | import("@vcmap/core", { with: { "resolution-mode": "import" } }).CreateFeatureSession<GeometryType> | undefined>;
@@ -53,8 +57,10 @@ declare const _default: import("vue").DefineComponent<{
     availableVectorProperties: import("vue").ShallowRef<never[]>;
     is3D: import("vue").Ref<boolean>;
     is2DFeature: import("vue").ComputedRef<boolean>;
+    isGeometryEditing: import("vue").ComputedRef<boolean>;
     updateFeatureProperties: (update: import("@vcmap/core").VectorPropertiesOptions) => void;
     defaultVectorProperties: import("@vcmap/core", { with: { "resolution-mode": "import" } }).VectorPropertiesOptions;
+    showInputs: import("vue").ComputedRef<boolean>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     allowedVectorProperties: {
         type: ArrayConstructor;
@@ -84,6 +90,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    showInputEditor: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>>, {
     altitudeModes: unknown[];
     allowedVectorProperties: unknown[];
@@ -92,6 +102,7 @@ declare const _default: import("vue").DefineComponent<{
     showResetVectorProperties: boolean;
     showStyle: boolean;
     showSnapping: boolean;
+    showInputEditor: boolean;
 }, {}>;
 export default _default;
 export type EditorManager = {

package/src/components/vector-properties/VcsFeatureInputEditor.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="vcs-point-input-editor">
+    <v-row no-gutters>
+      <v-col>
+        <VcsLabel html-for="posX">
+          {{ $t('components.editor.position.x') }}
+        </VcsLabel>
+      </v-col>
+      <v-col>
+        <VcsTextField
+          id="posX"
+          type="number"
+          v-model.number="coordinates[0]"
+          @update:model-value="isEdited = true"
+        />
+      </v-col>
+    </v-row>
+    <v-row no-gutters>
+      <v-col>
+        <VcsLabel html-for="posY">
+          {{ $t('components.editor.position.y') }}
+        </VcsLabel>
+      </v-col>
+      <v-col>
+        <VcsTextField
+          id="posY"
+          type="number"
+          v-model.number="coordinates[1]"
+          @update:model-value="isEdited = true"
+        />
+      </v-col>
+    </v-row>
+    <v-row no-gutters v-if="is3D">
+      <v-col>
+        <VcsLabel html-for="posZ">
+          {{ $t('components.editor.position.z') }}
+        </VcsLabel>
+      </v-col>
+      <v-col>
+        <VcsTextField
+          id="posZ"
+          type="number"
+          v-model.number="coordinates[2]"
+          @update:model-value="isEdited = true"
+        />
+      </v-col>
+    </v-row>
+    <v-row no-gutters v-if="isEdited" class="d-flex justify-end gc-1">
+      <VcsToolButton @click="cancel">
+        {{ $t('components.cancel') }}
+      </VcsToolButton>
+      <VcsToolButton @click="apply">
+        {{ $t('components.apply') }}
+      </VcsToolButton>
+    </v-row>
+  </div>
+</template>
+
+<script>
+  import { VCol, VRow } from 'vuetify/components';
+  import { inject, onUnmounted, ref } from 'vue';
+  import {
+    getDefaultProjection,
+    mercatorProjection,
+    Projection,
+  } from '@vcmap/core';
+  import { getLogger } from '@vcsuite/logger';
+  import VcsLabel from '../form-inputs-controls/VcsLabel.vue';
+  import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
+  import VcsToolButton from '../buttons/VcsToolButton.vue';
+
+  /**
+   * @description Component to edit the position of a feature in a vector layer. Currently
+   * only supports point features, which need to be the currently selected feature in the manager.
+   * @vue-prop {boolean} is3D - Whether the feature is in 3D.
+   */
+  export default {
+    name: 'VcsFeatureEditingWindow',
+    components: {
+      VCol,
+      VRow,
+      VcsLabel,
+      VcsTextField,
+      VcsToolButton,
+    },
+    props: {
+      is3D: {
+        type: Boolean,
+        required: true,
+      },
+    },
+    setup() {
+      const { currentFeatures: features } = inject('manager');
+
+      if (
+        features.value.length !== 1 ||
+        features.value[0]?.getGeometry()?.getType() !== 'Point'
+      ) {
+        getLogger('VcsFeatureEditingWindow').error(
+          'This component only supports editing a single point feature.',
+        );
+      }
+
+      const isEdited = ref(false);
+      /** @type {import("ol").Feature} */
+      const feature = features.value[0];
+      const defaultProjection = getDefaultProjection();
+      const decimalPlaces = defaultProjection.epsg.includes('4326') ? 6 : 2;
+
+      function transform(coordinates) {
+        return mercatorProjection
+          .transformTo(defaultProjection, coordinates)
+          .map((c, i) => +c.toFixed(i === 2 ? 2 : decimalPlaces));
+      }
+      const coordinates = ref(
+        transform(feature.getGeometry().getFlatCoordinates()),
+      );
+
+      function updateFromFeature() {
+        coordinates.value = transform(
+          feature.getGeometry().getFlatCoordinates(),
+        );
+      }
+      feature.on('change', updateFromFeature);
+      onUnmounted(() => {
+        feature.un('change', updateFromFeature);
+      });
+
+      function updateFromInput() {
+        let updatedCoordinates;
+        try {
+          updatedCoordinates = Projection.transform(
+            mercatorProjection,
+            defaultProjection,
+            coordinates.value,
+          );
+          feature.getGeometry().setCoordinates(updatedCoordinates);
+        } catch (error) {
+          getLogger('VcsFeatureEditingWindow').error(
+            'Invalid coordinates input',
+            error,
+          );
+        }
+      }
+
+      return {
+        isEdited,
+        coordinates,
+        apply: () => {
+          updateFromInput();
+          isEdited.value = false;
+        },
+        cancel: () => {
+          updateFromFeature();
+          isEdited.value = false;
+        },
+      };
+    },
+  };
+</script>
+
+<style scoped>
+  :deep(.v-btn__content):hover {
+    color: rgb(var(--v-theme-primary));
+  }
+</style>

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

@@ -0,0 +1,17 @@
+declare const _default: import("vue").DefineComponent<{
+    is3D: {
+        type: BooleanConstructor;
+        required: true;
+    };
+}, {
+    isEdited: import("vue").Ref<boolean>;
+    coordinates: import("vue").Ref<number[]>;
+    apply: () => void;
+    cancel: () => void;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    is3D: {
+        type: BooleanConstructor;
+        required: true;
+    };
+}>>, {}, {}>;
+export default _default;

package/src/contentTree/contentTreeCollection.d.ts

@@ -23,6 +23,11 @@ declare class ContentTreeCollection extends IndexedCollection<ContentTreeItem> {
      * @param {import("@src/vcsUiApp.js").default} app
      */
     constructor(app: import("@src/vcsUiApp.js").default);
+    /**
+     * @type {string|undefined}
+     * @private
+     */
+    private _removedListenerTimeoutId;
     /**
      * @type {import("@src/vcsUiApp.js").default}
      * @private

package/src/contentTree/contentTreeCollection.js

@@ -31,6 +31,11 @@ export const defaultContentTreeComponentId = 'Content';
  * @extends {IndexedCollection<ContentTreeItem>}
  */
 class ContentTreeCollection extends IndexedCollection {
+  /**
+   * @type {string|undefined}
+   * @private
+   */
+  _removedListenerTimeoutId;
   /**
    * @param {import("@src/vcsUiApp.js").default} app
    */
@@ -75,13 +80,13 @@ class ContentTreeCollection extends IndexedCollection {
         'contentTreeActiveOnStartup',
       );
       if (
-        contentTreeActiveOnStartup?.value &&
+        contentTreeActiveOnStartup?.value != null &&
         contentTreeActiveOnStartup[moduleIdSymbol] !== this._app.dynamicModuleId
       ) {
         const action = this._app.navbarManager.get(
           defaultContentTreeComponentId,
         )?.action;
-        if (action && !action.active) {
+        if (action && action.active !== contentTreeActiveOnStartup.value) {
           action.callback();
         }
       }
@@ -107,7 +112,10 @@ class ContentTreeCollection extends IndexedCollection {
         }
       }),
       this.removed.addEventListener((child) => {
-        recreateTree();
+        clearTimeout(this._removedListenerTimeoutId);
+        this._removedListenerTimeoutId = setTimeout(() => {
+          recreateTree();
+        }, 0);
         if (this._weightListeners.has(child.name)) {
           this._weightListeners.get(child.name)();
           this._weightListeners.delete(child.name);

package/src/contentTree/contentTreeItem.d.ts

@@ -272,11 +272,11 @@ declare class ContentTreeItem {
     /**
      * @param {(string|HTMLCanvasElement|HTMLImageElement)=} icon
      */
-    set icon(icon: string | HTMLImageElement | HTMLCanvasElement | undefined);
+    set icon(icon: string | HTMLCanvasElement | HTMLImageElement | undefined);
     /**
      * @type {string|HTMLCanvasElement|HTMLImageElement|undefined}
      */
-    get icon(): string | HTMLImageElement | HTMLCanvasElement | undefined;
+    get icon(): string | HTMLCanvasElement | HTMLImageElement | undefined;
     /**
      * @param {number} weight
      */

package/src/contentTree/wmsGroupContentTreeItem.js

@@ -522,6 +522,10 @@ class WMSGroupContentTreeItem extends VcsObjectContentTreeItem {
           this._layer.url,
           this._layer.parameters,
         );
+        // check if the layer still exists, it can happen that the layer was removed while fetching the capabilities.
+        if (!this._layer) {
+          return;
+        }
         this._availableWMSEntries = availableWMSEntries.filter((wmsEntry) => {
           return this._allowedWMSLayers
             ? this._allowedWMSLayers.includes(wmsEntry.name)
@@ -558,9 +562,12 @@ class WMSGroupContentTreeItem extends VcsObjectContentTreeItem {
         this._setState();
         this._setLegend();
       } catch (e) {
-        this._layer.deactivate();
-        this.visible = false;
-        this._invalid = true;
+        // if the layer is not there it has been removed while fetching the capabilities.
+        if (this._layer) {
+          this._layer.deactivate();
+          this.visible = false;
+          this._invalid = true;
+        }
         getLogger(this.className).error(
           `An error occured while fetching the ${this._layerName} capabilities:`,
           e,