@vcmap/ui 5.3.7 → 6.0.0-rc.10

package/src/components/tables/VcsTable.vue

@@ -1,41 +1,34 @@
 <template>
   <VcsDataTable
-    :items="items"
-    :headers="headers"
-    item-key="key"
+    class="vcs-table"
     v-bind="$attrs"
+    :items="items"
+    :headers="[keyHeader, valueHeader]"
   >
-    <!-- eslint-disable-next-line -->
-    <template #item.key="{ item }">
-      <td
-        class="vcs-table px-2 overflow-max-width rounded-0 noBorder"
-        :style="{ 'max-width': headers[0].width }"
-      >
-        {{ $t(item.key) }}
-      </td>
-    </template>
-    <!-- eslint-disable-next-line -->
-    <template #item.value="{ item }">
-      <td
-        class="vcs-table px-2 overflow-max-width rounded-0 noBorder"
-        :style="{ 'max-width': headers[1].width }"
+    <template #body="{ page, itemsPerPage }">
+      <tr
+        class="v-data-table__tr"
+        v-for="(item, idx) in items.slice(
+          (page - 1) * itemsPerPage,
+          page * itemsPerPage,
+        )"
+        :key="`row-${idx}`"
       >
-        <component
-          :is="getTag(tags, item.key)"
-          v-bind="getTagOptions(tags, item.key)"
-          :class="{
-            'single-line': !/\s/.test(item.value),
-            'multi-line': /\s/.test(item.value),
-          }"
+        <vcs-table-cell :title="item.key" :width="keyHeader.width" />
+        <vcs-table-cell
+          :title="item.value"
+          :width="valueHeader.width"
+          :tag="getTag(tags, item.key)"
+          :tag-options="getTagOptions(tags, item.key)"
         >
-          {{ $t(item.value) }}
-        </component>
-      </td>
+        </vcs-table-cell>
+      </tr>
     </template>
   </VcsDataTable>
 </template>
 <script>
   import { computed } from 'vue';
+  import VcsTableCell from './VcsTableCell.vue';
   import VcsDataTable from './VcsDataTable.vue';
 
   /**
@@ -132,22 +125,19 @@
 
   /**
    * @description A table view for feature attributes using VcsDataTable
-   * @vue-prop {string} featureId - feature's id
    * @vue-prop {Object} attributes - feature's attributes
    * @vue-prop {Object} tags - Allows to render the value column for specific attribute keys with special html elements. See 'defaultTagOptions' for supported html tags.
-   * @vue-prop {Array<{text: string, value: string}>} [headers] - optional array defining column names
+   * @vue-prop {{title: string, key: 'key', width: string|undefined}} [keyHeader] - optional header defining the key column
+   * @vue-prop {{title: string, key: 'value', width: string|undefined}} [valueHeader] - optional header defining the value column
    * @vue-computed {Array<TableItem>} items - from attributes derived table items
    */
   export default {
     name: 'VcsTable',
     components: {
+      VcsTableCell,
       VcsDataTable,
     },
     props: {
-      featureId: {
-        type: String,
-        required: true,
-      },
       attributes: {
         type: Object,
         required: true,
@@ -156,12 +146,23 @@
         type: Object,
         default: undefined,
       },
-      headers: {
-        type: Array,
-        default: () => [
-          { text: 'components.vcsTable.key', value: 'key', width: '160px' },
-          { text: 'components.vcsTable.value', value: 'value', width: '160px' },
-        ],
+      keyHeader: {
+        type: Object,
+        default: () => ({
+          title: 'components.vcsTable.key',
+          key: 'key',
+          width: '128px',
+        }),
+        validator: (value) => value.key === 'key',
+      },
+      valueHeader: {
+        type: Object,
+        default: () => ({
+          title: 'components.vcsTable.value',
+          key: 'value',
+          width: '192px',
+        }),
+        validator: (value) => value.key === 'value',
       },
     },
     setup(props) {
@@ -169,10 +170,7 @@
        * @type {ComputedRef<Array<TableItem>>}
        */
       const items = computed(() => {
-        return attributesToItems({
-          featureId: props.featureId,
-          ...props.attributes,
-        });
+        return attributesToItems(props.attributes);
       });
 
       return {
@@ -185,30 +183,11 @@
 </script>
 
 <style lang="scss" scoped>
-  .single-line {
-    display: block;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .multi-line {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
-    overflow: hidden;
-    height: auto;
-    max-height: 96px;
-  }
-
-  .noBorder {
-    border-bottom: none !important;
-  }
-
-  ::v-deep {
-    .v-data-table__mobile-row__cell {
-      td.vcs-table.overflow-max-width {
-        max-width: 100% !important;
-      }
+  :deep(.v-data-table__mobile-row__cell) {
+    td.vcs-table.overflow-max-width {
+      max-width: 100% !important;
     }
   }
+  :deep(.v-table__wrapper) {
+  }
 </style>

package/src/components/tables/VcsTable.vue.d.ts

@@ -32,10 +32,6 @@ export const defaultTagOptions: {
     };
 };
 declare const _default: import("vue").DefineComponent<{
-    featureId: {
-        type: StringConstructor;
-        required: true;
-    };
     attributes: {
         type: ObjectConstructor;
         required: true;
@@ -44,23 +40,29 @@ declare const _default: import("vue").DefineComponent<{
         type: ObjectConstructor;
         default: undefined;
     };
-    headers: {
-        type: ArrayConstructor;
+    keyHeader: {
+        type: ObjectConstructor;
+        default: () => {
+            title: string;
+            key: string;
+            width: string;
+        };
+        validator: (value: unknown) => boolean;
+    };
+    valueHeader: {
+        type: ObjectConstructor;
         default: () => {
-            text: string;
-            value: string;
+            title: string;
+            key: string;
             width: string;
-        }[];
+        };
+        validator: (value: unknown) => boolean;
     };
 }, {
     items: ComputedRef<TableItem[]>;
     getTag: typeof getTag;
     getTagOptions: typeof getTagOptions;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
-    featureId: {
-        type: StringConstructor;
-        required: true;
-    };
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     attributes: {
         type: ObjectConstructor;
         required: true;
@@ -69,18 +71,29 @@ declare const _default: import("vue").DefineComponent<{
         type: ObjectConstructor;
         default: undefined;
     };
-    headers: {
-        type: ArrayConstructor;
+    keyHeader: {
+        type: ObjectConstructor;
+        default: () => {
+            title: string;
+            key: string;
+            width: string;
+        };
+        validator: (value: unknown) => boolean;
+    };
+    valueHeader: {
+        type: ObjectConstructor;
         default: () => {
-            text: string;
-            value: string;
+            title: string;
+            key: string;
             width: string;
-        }[];
+        };
+        validator: (value: unknown) => boolean;
     };
 }>>, {
-    headers: unknown[];
     tags: Record<string, any>;
-}>;
+    keyHeader: Record<string, any>;
+    valueHeader: Record<string, any>;
+}, {}>;
 export default _default;
 export type TableItem = {
     key: string;

package/src/components/tables/VcsTableCell.vue

@@ -0,0 +1,72 @@
+<script setup>
+  import { ref, computed } from 'vue';
+  import { VTooltip } from 'vuetify/components';
+  import { createEllipseTooltip } from '../composables.js';
+
+  const props = defineProps({
+    title: {
+      type: [String, Number],
+      default: undefined,
+    },
+    width: {
+      type: [String, Number],
+      default: undefined,
+    },
+    tag: {
+      type: String,
+      default: 'div',
+    },
+    tagOptions: {
+      type: Object,
+      default: () => {},
+    },
+  });
+
+  const td = ref(null);
+
+  const tooltip = createEllipseTooltip(
+    computed(() => td.value),
+    computed(() => undefined),
+    computed(() => props.title),
+  );
+
+  const hasWhiteSpace = computed(() => /\s/.test(props.title));
+  // important: tooltip has evaluated before single-line and multi-line class are applied
+  const isSingleLine = computed(() => tooltip.value && !hasWhiteSpace.value);
+  const isMultiLine = computed(() => tooltip.value && hasWhiteSpace.value);
+</script>
+
+<template>
+  <td ref="td" :style="{ 'max-width': width }" class="vcs-table-cell">
+    <component
+      :is="tag"
+      :class="{
+        'single-line': isSingleLine,
+        'multi-line': isMultiLine,
+      }"
+      v-bind="tagOptions"
+    >
+      {{ $st(title) }}
+    </component>
+    <v-tooltip v-if="tooltip" activator="parent">
+      {{ $st(tooltip) }}
+    </v-tooltip>
+  </td>
+</template>
+
+<style scoped>
+  .single-line {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .multi-line {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    overflow: hidden;
+    height: auto;
+    max-height: 96px;
+  }
+</style>

package/src/components/tables/VcsTableCell.vue.d.ts

@@ -0,0 +1,13 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    tag: string;
+    tagOptions: Record<string, any>;
+    title?: string | number | undefined;
+    width?: string | number | undefined;
+    $props: {
+        readonly tag?: string | undefined;
+        readonly tagOptions?: Record<string, any> | undefined;
+        readonly title?: string | number | undefined;
+        readonly width?: string | number | undefined;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

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

@@ -1,7 +1,7 @@
 <template>
-  <v-sheet>
+  <v-sheet class="vcs-feature-editing-window">
     <VcsFormSection
-      v-if="session.type === SessionType.SELECT"
+      v-if="session?.type === SessionType.SELECT"
       heading="components.editor.modifyHeader"
       :action-button-list-overflow-count="5"
       :header-actions="availableModifyActions"
@@ -22,25 +22,36 @@
       <VcsFeatureStyleComponent :feature-properties="featureProperties" />
     </VcsFormSection>
     <VcsVectorPropertiesComponent
-      :value="featureProperties"
       :show3-d-properties="is3D"
-      @propertyChange="updateFeatureProperties"
+      :is2-d-feature="is2DFeature"
       :value-default="defaultVectorProperties"
       :properties="availableVectorProperties"
       :show-dividers="false"
       :expandable="expandableVectorProperties"
       :start-open="startOpenVectorProperties"
       :show-reset="showResetVectorProperties"
+      :model-value="featureProperties"
+      @update:model-value="updateFeatureProperties"
     />
   </v-sheet>
 </template>
 
 <script>
-  import { VSheet } from 'vuetify/lib';
-  import { inject, ref, watch, onUnmounted, provide, computed } from 'vue';
+  import { VSheet } from 'vuetify/components';
+  import {
+    inject,
+    ref,
+    watch,
+    onUnmounted,
+    provide,
+    computed,
+    shallowRef,
+    reactive,
+  } from 'vue';
   import {
     CesiumMap,
     GeometryType,
+    is2DLayout,
     SessionType,
     TransformationMode,
     VectorProperties,
@@ -52,7 +63,7 @@
     pointVectorProperties,
     nonPointVectorProperties,
   } from './VcsVectorPropertiesComponent.vue';
-  import VcsFormSection from '../form-inputs-controls/VcsFormSection.vue';
+  import VcsFormSection from '../section/VcsFormSection.vue';
 
   /**
    * @typedef {Object} EditorManager
@@ -60,7 +71,6 @@
    * @property {import("vue").ShallowRef<import("ol").Feature[]>} currentFeatures
    * @property {import("vue").ShallowRef<import("@vcmap/core").EditGeometrySession | import("@vcmap/core").EditFeaturesSession | undefined>} currentEditSession
    * @property {import("vue").ShallowRef<import("@vcmap/core").SelectFeaturesSession | import("@vcmap/core").CreateFeatureSession<import("@vcmap/core").GeometryType> | undefined>} currentSession
-   * @property {function():Promise<void>} placeCurrentFeaturesOnTerrain
    * @property {function():void} stopEditing
    * @property {function(import("ol").Feature=):Promise<void>|void} startEditSession
    * @property {function(import("@vcmap/core").TransformationMode, import("ol").Feature[]=):Promise<void>|void} startTransformSession
@@ -90,18 +100,28 @@
   /**
    * Returns the allowed transformation modes for the provided geometry types and number of features. Rotate is e.g. not allowed for a single point but for multiple points.
    * @param {Set<GeometryType>} geometryTypes A set with all geometry types of the features.
-   * @param {number} nFeatures The number of the features.
+   * @param {import("ol").Feature[]} features The features currently being edited.
+   * @param {import("@vcmap/core").VectorLayer} layer The number of the features.
+   * @param {boolean} is3D if the current map is 3D
    * @returns {Array<TransformationMode>} The allowed transformation modes.
    */
   export function getAllowedEditorTransformationModes(
     geometryTypes,
-    nFeatures,
+    features,
+    layer,
+    is3D = false,
   ) {
+    const nFeatures = features.length;
     const isSinglePoint =
-      nFeatures === 1 && geometryTypes.has(GeometryType.Point);
+      nFeatures === 1 &&
+      geometryTypes.has(GeometryType.Point) &&
+      (!is3D || layer.vectorProperties.renderAs(features[0]) === 'geometry');
+
     const isSingleCircle =
       nFeatures === 1 && geometryTypes.has(GeometryType.Circle);
+
     const isBboxSelected = geometryTypes.has(GeometryType.BBox);
+
     return [
       TransformationMode.TRANSLATE,
       ...(isSinglePoint || isSingleCircle || isBboxSelected
@@ -166,11 +186,11 @@
         currentLayer: layer,
       } = editorManager;
 
-      const availableModifyActions = ref([]);
-      const availableVectorProperties = ref([]);
+      const availableModifyActions = shallowRef([]);
+      const availableVectorProperties = shallowRef([]);
 
       provide('features', features);
-      const featureProperties = ref();
+      const featureProperties = shallowRef();
 
       watch(
         features,
@@ -185,36 +205,7 @@
        * Sets the changed vector property options on the features. Also handles side effects.
        * @param {import("@vcmap/core").VectorPropertiesOptions} update New property values from user input.
        */
-      async function updateFeatureProperties(update) {
-        const extrusionLikePropertyKeys = [
-          'extrudedHeight',
-          'skirt',
-          'storeysAboveGround',
-          'storeysBelowGround',
-          'storeyHeightsAboveGround',
-          'storeyHeightsBelowGround',
-        ];
-        const setsExtrusionLikePropertyKeys =
-          !!extrusionLikePropertyKeys.filter(
-            (key) => Object.keys(update).includes(key) && !!update[key],
-          ).length;
-        if (
-          setsExtrusionLikePropertyKeys &&
-          featureProperties.value.altitudeMode !== 'absolute'
-        ) {
-          update.altitudeMode = 'absolute';
-        } else if (update.altitudeMode === 'clampToGround') {
-          extrusionLikePropertyKeys
-            .filter((key) => !!featureProperties.value[key])
-            .forEach((key) => {
-              update[key] = 0;
-            });
-        }
-        // when in create mode and changing altitude mode, this is triggered, but currentFeatures is empty array.
-        if (update.altitudeMode === 'absolute' && features?.length) {
-          await editorManager.placeCurrentFeaturesOnTerrain();
-        }
-
+      function updateFeatureProperties(update) {
         layer.value.vectorProperties.setValuesForFeatures(
           update,
           features.value,
@@ -224,6 +215,15 @@
       }
 
       const is3D = ref(false);
+      const is2DFeature = computed(() =>
+        features.value.some((f) => {
+          const geometry = f.getGeometry();
+          if (geometry && geometry.getFlatCoordinates().length > 0) {
+            return is2DLayout(f.getGeometry()?.getLayout());
+          }
+          return !is3D.value;
+        }),
+      );
 
       function updateIs3D() {
         is3D.value = vcsApp.maps.activeMap instanceof CesiumMap;
@@ -282,37 +282,65 @@
         nFeatures: features.value.length,
       }));
 
+      /**
+       * @returns {{actions: VcsActions, destroy: function():void}}
+       */
       function getAllowedModifyActions() {
         const allowedModes = getAllowedEditorTransformationModes(
           currentGeometryTypes.value.types,
-          currentGeometryTypes.value.nFeatures,
+          features.value,
+          layer.value,
+          is3D.value,
         );
 
         const allowedActions = allowedModes.map((mode) => {
-          return {
+          return reactive({
             name: mode,
             title: `components.editor.${mode}`,
             icon: EditorTransformationIcons[mode],
-            active: computed(() => currentTransformationMode.value === mode),
+            active: mode === currentTransformationMode.value,
             callback: () => {
               toggleTransformationSession(mode);
             },
-          };
+          });
         });
 
+        const transformationModeWatcher = watch(
+          currentTransformationMode,
+          (mode) => {
+            allowedActions.forEach((action) => {
+              if (Object.values(TransformationMode).includes(action.name)) {
+                action.active = mode === action.name;
+              }
+            });
+          },
+        );
+
+        let geometryEditingWatcher;
         if (features.value.length === 1) {
-          allowedActions.unshift({
+          const editGeometryAction = reactive({
             name: 'editGeometry',
             title: `components.editor.edit`,
             icon: '$vcsEditVertices',
-            active: isGeometryEditing,
+            active: isGeometryEditing.value,
             callback: () => {
               toggleEditGeometrySession();
             },
           });
+          allowedActions.unshift(editGeometryAction);
+
+          geometryEditingWatcher = watch(isGeometryEditing, () => {
+            editGeometryAction.active = isGeometryEditing.value;
+          });
         }
 
-        return allowedActions;
+        return {
+          actions: allowedActions,
+          destroy() {
+            transformationModeWatcher();
+            geometryEditingWatcher?.();
+          },
+        };
       }
 
       function getAllowedVectorProperties() {
@@ -342,6 +370,8 @@
         return properties;
       }
 
+      let destroyModifyActions = () => {};
+
       const geometryTypesWatcher = watch(
         currentGeometryTypes,
         (curr, prev) => {
@@ -351,7 +381,11 @@
             (curr.nFeatures > 1 && prev.nFeatures === 1) ||
             (prev.nFeatures > 1 && curr.nFeatures === 1)
           ) {
-            availableModifyActions.value = getAllowedModifyActions();
+            destroyModifyActions();
+            const modifyActions = getAllowedModifyActions();
+            destroyModifyActions = modifyActions.destroy;
+
+            availableModifyActions.value = modifyActions.actions;
             availableVectorProperties.value = getAllowedVectorProperties();
           }
         },
@@ -371,6 +405,7 @@
         geometryTypesWatcher();
         propsWatcher();
         editorManager.stopEditing();
+        destroyModifyActions();
       });
 
       return {
@@ -382,6 +417,7 @@
         availableModifyActions,
         availableVectorProperties,
         is3D,
+        is2DFeature,
         updateFeatureProperties,
         defaultVectorProperties: VectorProperties.getDefaultOptions(),
       };

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

@@ -1,10 +1,12 @@
 /**
  * Returns the allowed transformation modes for the provided geometry types and number of features. Rotate is e.g. not allowed for a single point but for multiple points.
  * @param {Set<GeometryType>} geometryTypes A set with all geometry types of the features.
- * @param {number} nFeatures The number of the features.
+ * @param {import("ol").Feature[]} features The features currently being edited.
+ * @param {import("@vcmap/core").VectorLayer} layer The number of the features.
+ * @param {boolean} is3D if the current map is 3D
  * @returns {Array<TransformationMode>} The allowed transformation modes.
  */
-export function getAllowedEditorTransformationModes(geometryTypes: Set<GeometryType>, nFeatures: number): Array<TransformationMode>;
+export function getAllowedEditorTransformationModes(geometryTypes: Set<GeometryType>, features: import("ol").Feature[], layer: import("@vcmap/core").VectorLayer, is3D?: boolean): Array<TransformationMode>;
 export namespace EditorTransformationIcons {
     let translate: string;
     let rotate: string;
@@ -33,17 +35,18 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
 }, {
-    featureProperties: import("vue").Ref<any>;
-    session: import("vue").ShallowRef<import("@vcmap/core").SelectFeaturesSession | import("@vcmap/core").CreateFeatureSession<GeometryType> | undefined>;
+    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>;
     SessionType: typeof SessionType;
     currentTransformationMode: import("vue").Ref<any>;
     TransformationMode: typeof TransformationMode;
-    availableModifyActions: import("vue").Ref<never[]>;
-    availableVectorProperties: import("vue").Ref<never[]>;
+    availableModifyActions: import("vue").ShallowRef<never[]>;
+    availableVectorProperties: import("vue").ShallowRef<never[]>;
     is3D: import("vue").Ref<boolean>;
-    updateFeatureProperties: (update: import("@vcmap/core").VectorPropertiesOptions) => Promise<void>;
-    defaultVectorProperties: import("@vcmap/core").VectorPropertiesOptions;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    is2DFeature: import("vue").ComputedRef<boolean>;
+    updateFeatureProperties: (update: import("@vcmap/core").VectorPropertiesOptions) => void;
+    defaultVectorProperties: import("@vcmap/core", { with: { "resolution-mode": "import" } }).VectorPropertiesOptions;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     allowedVectorProperties: {
         type: ArrayConstructor;
         default: () => string[];
@@ -70,14 +73,13 @@ declare const _default: import("vue").DefineComponent<{
     startOpenVectorProperties: boolean;
     showResetVectorProperties: boolean;
     showStyle: boolean;
-}>;
+}, {}>;
 export default _default;
 export type EditorManager = {
     currentLayer: import("vue").ShallowRef<import("@vcmap/core").Layer | undefined>;
     currentFeatures: import("vue").ShallowRef<import("ol").Feature[]>;
     currentEditSession: import("vue").ShallowRef<import("@vcmap/core").EditGeometrySession | import("@vcmap/core").EditFeaturesSession | undefined>;
     currentSession: import("vue").ShallowRef<import("@vcmap/core").SelectFeaturesSession | import("@vcmap/core").CreateFeatureSession<import("@vcmap/core").GeometryType> | undefined>;
-    placeCurrentFeaturesOnTerrain: () => Promise<void>;
     stopEditing: () => void;
     startEditSession: (arg0: import("ol").Feature | undefined) => Promise<void> | void;
     startTransformSession: (arg0: import("@vcmap/core").TransformationMode, arg1: import("ol").Feature[] | undefined) => Promise<void> | void;