@vcmap/ui 6.2.0-rc.1 → 6.2.0-rc.3

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/VcsWorkspaceWrapper.vue

@@ -0,0 +1,104 @@
+<template>
+  <v-container class="pa-0 abstract-workspace-item-creator">
+    <slot />
+    <div v-if="showFooter">
+      <v-divider class="mt-3" />
+      <div class="d-flex w-full justify-space-between px-2 pt-2 pb-1">
+        <VcsFormButton
+          v-if="showAdd && !workspaceHidden"
+          icon="$vcsComponentsPlus"
+          :disabled="disableAdd"
+          :tooltip="tooltipAdd"
+          @click="$emit('addClicked', $event)"
+        />
+        <div class="d-flex gc-2 w-100 justify-end">
+          <slot name="secondaryButton" />
+          <VcsFormButton
+            variant="filled"
+            :disabled="disableNew"
+            :tooltip="tooltipNew"
+            @click="$emit('newClicked', $event)"
+          >
+            {{ $st(newButtonTitle) }}
+          </VcsFormButton>
+          <VcsActionButtonList :actions="actions" button="VcsFormButton" />
+        </div>
+      </div>
+    </div>
+  </v-container>
+</template>
+
+<script>
+  import { VContainer, VDivider } from 'vuetify/components';
+  import { computed, inject } from 'vue';
+  import VcsFormButton from '../buttons/VcsFormButton.vue';
+  import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
+
+  /**
+   * @description Basic wrapper for all plugins interacting with MyWorkspace.
+   * Providing a footer with add and new buttons.
+   * @vue-prop {boolean} [showFooter=true] - Flag to hide the footer.
+   * @vue-prop {boolean} [showAdd=true] - Flag to show an add button in the footer. You need to handle @addClicked in a child component.
+   * @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 {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.
+   * @vue-event {Event} newClicked - Event fired on clicking the cancel button.
+   * @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: 'VcsWorkspaceWrapper',
+    components: {
+      VContainer,
+      VDivider,
+      VcsFormButton,
+      VcsActionButtonList,
+    },
+    props: {
+      showFooter: {
+        type: Boolean,
+        default: true,
+      },
+      showAdd: {
+        type: Boolean,
+        default: true,
+      },
+      disableAdd: {
+        type: Boolean,
+        default: false,
+      },
+      tooltipAdd: {
+        type: String,
+        default: 'components.addToMyWorkspace',
+      },
+      newButtonTitle: {
+        type: String,
+        default: 'components.new',
+      },
+      disableNew: {
+        type: Boolean,
+        default: false,
+      },
+      tooltipNew: {
+        type: String,
+        default: '',
+      },
+      actions: {
+        type: Array,
+        default: () => [],
+      },
+    },
+    emits: ['addClicked', 'newClicked'],
+    setup() {
+      const app = inject('vcsApp');
+      return {
+        workspaceHidden: computed(() => !!app.uiConfig.config.workspaceHidden),
+      };
+    },
+  };
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,82 @@
+declare const _default: import("vue").DefineComponent<{
+    showFooter: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showAdd: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disableAdd: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tooltipAdd: {
+        type: StringConstructor;
+        default: string;
+    };
+    newButtonTitle: {
+        type: StringConstructor;
+        default: string;
+    };
+    disableNew: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tooltipNew: {
+        type: StringConstructor;
+        default: string;
+    };
+    actions: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+}, {
+    workspaceHidden: import("vue").ComputedRef<boolean>;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("addClicked" | "newClicked")[], "addClicked" | "newClicked", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    showFooter: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showAdd: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disableAdd: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tooltipAdd: {
+        type: StringConstructor;
+        default: string;
+    };
+    newButtonTitle: {
+        type: StringConstructor;
+        default: string;
+    };
+    disableNew: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tooltipNew: {
+        type: StringConstructor;
+        default: string;
+    };
+    actions: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+}>> & {
+    onAddClicked?: ((...args: any[]) => any) | undefined;
+    onNewClicked?: ((...args: any[]) => any) | undefined;
+}, {
+    actions: unknown[];
+    showFooter: boolean;
+    showAdd: boolean;
+    disableAdd: boolean;
+    tooltipAdd: string;
+    newButtonTitle: string;
+    disableNew: boolean;
+    tooltipNew: string;
+}, {}>;
+export default _default;

package/src/components/section/VcsExpansionPanel.vue

@@ -4,8 +4,8 @@
     VExpansionPanelText,
     VExpansionPanelTitle,
     VIcon,
-    VTooltip,
     VListItemTitle,
+    VTooltip,
   } from 'vuetify/components';
   import { computed, ref, useSlots } from 'vue';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
@@ -96,7 +96,9 @@
     line-height: 1.2;
     padding: 0 8px;
   }
-
+  :deep(.v-list-item-title) > span {
+    font-weight: bold;
+  }
   .vcs-panel-title__append {
     width: 90%;
     display: inline-block;
@@ -104,8 +106,16 @@
     text-overflow: ellipsis;
     vertical-align: bottom;
   }
-
   :deep(.v-expansion-panel-text__wrapper) {
     padding: 0 0;
   }
 </style>
+
+<style lang="scss">
+  .v-expansion-panels {
+    z-index: auto;
+    > div:not(:last-child):has(.vcs-expansion-panel) {
+      border-bottom: 1px solid rgb(var(--v-theme-base-lighten-2));
+    }
+  }
+</style>

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/components/vector-properties/VcsVectorPropertiesComponent.vue.d.ts

@@ -84,7 +84,7 @@ declare const _default: import("vue").DefineComponent<{
         } | undefined;
         getEyeOffset: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3 | undefined;
         heightAboveGround: number | undefined;
-        getHeightAboveGround: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => number;
+        getHeightAboveGround: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => number | undefined;
         skirt: number;
         getSkirt: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => number;
         groundLevel: number | undefined;

package/src/contentTree/LayerSwap.vue

@@ -72,11 +72,15 @@
       const wmsGroupItemsMap = getWmsGroupItemsMap(app);
 
       /**
-       * @param {import("@vcmap/core").Layer}l
+       * @param {import("@vcmap/core").Layer} l
        * @returns {boolean}
        */
       const layerFilter = (l) => {
-        return l.active && l[moduleIdSymbol] !== volatileModuleId;
+        return (
+          l.active &&
+          l[moduleIdSymbol] !== volatileModuleId &&
+          l.isSupported(app.maps.activeMap)
+        );
       };
 
       function getLayerTreeItems() {
@@ -101,11 +105,16 @@
 
       const items = shallowRef(getLayerTreeItems());
 
-      const listener = app.layers.stateChanged.addEventListener(() => {
-        items.value = getLayerTreeItems();
-      });
+      const listeners = [
+        app.layers.stateChanged.addEventListener(() => {
+          items.value = getLayerTreeItems();
+        }),
+        app.maps.mapActivated.addEventListener(() => {
+          items.value = getLayerTreeItems();
+        }),
+      ];
 
-      onUnmounted(() => listener());
+      onUnmounted(() => listeners.forEach((l) => l()));
 
       return {
         items,