@vcmap/ui 6.0.0-rc.1 → 6.0.0-rc.10

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
-      :model-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/components';
-  import { inject, ref, watch, onUnmounted, provide, computed } from 'vue';
+  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,15 +35,16 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
 }, {
-    featureProperties: import("vue").Ref<any>;
+    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>;
+    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: {
@@ -77,7 +80,6 @@ export type EditorManager = {
     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;

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

@@ -1,5 +1,5 @@
 <template>
-  <v-sheet>
+  <v-sheet class="vcs-feature-transforms">
     <v-container class="pl-0 pr-1 py-1">
       <v-row
         no-gutters
@@ -11,6 +11,7 @@
             type="number"
             placeholder="0"
             prefix="X"
+            force-prefix
             v-model.number="xValue"
             unit="m"
             @keydown.enter.prevent="translate"
@@ -22,6 +23,7 @@
             type="number"
             placeholder="0"
             prefix="Y"
+            force-prefix
             v-model.number="yValue"
             unit="m"
             @keydown.enter.prevent="translate"
@@ -33,6 +35,7 @@
             type="number"
             placeholder="0"
             prefix="Z"
+            force-prefix
             v-model.number="zValue"
             unit="m"
             :disabled="
@@ -54,7 +57,8 @@
               !allowZInput || featureProperties.altitudeMode !== 'absolute'
             "
           >
-            <v-icon>$vcsGround</v-icon>
+            <v-icon v-if="placeOnTerrainLoading">$vcsProgress</v-icon>
+            <v-icon v-else>$vcsGround</v-icon>
           </VcsButton>
         </v-col>
       </v-row>
@@ -89,6 +93,7 @@
         <v-col cols="3">
           <VcsTextField
             prefix="X"
+            force-prefix
             v-model.number="xValue"
             placeholder="1"
             @keydown.enter.prevent="scale"
@@ -97,6 +102,7 @@
         <v-col cols="3">
           <VcsTextField
             prefix="Y"
+            force-prefix
             v-model.number="yValue"
             placeholder="1"
             @keydown.enter.prevent="scale"
@@ -113,8 +119,8 @@
 </template>
 
 <script>
-  import { Math as CesiumMath } from '@vcmap-cesium/engine';
-  import { TransformationMode } from '@vcmap/core';
+  import { Math as CesiumMath, HeightReference } from '@vcmap-cesium/engine';
+  import { TransformationMode, placeGeometryOnSurface } from '@vcmap/core';
   import { VSheet, VContainer, VRow, VCol, VIcon } from 'vuetify/components';
   import { inject, ref, watch } from 'vue';
   import VcsButton from '../buttons/VcsButton.vue';
@@ -154,6 +160,8 @@
     setup(props) {
       /** @type {import("./VcsFeatureEditingWindow.vue").EditorManager} */
       const manager = inject('manager');
+      /** @type {import("../../vcsUiApp.js").default} */
+      const vcsApp = inject('vcsApp');
 
       const showTranslate = ref(false);
       const showRotate = ref(false);
@@ -175,6 +183,8 @@
         },
       );
 
+      const placeOnTerrainLoading = ref(false);
+
       return {
         showTranslate,
         showRotate,
@@ -210,8 +220,37 @@
           );
           resetInputs();
         },
-        placeOnTerrain() {
-          manager.placeCurrentFeaturesOnTerrain();
+        placeOnTerrainLoading,
+        async placeOnTerrain() {
+          const scene = vcsApp.maps.activeMap?.getScene?.();
+          if (!scene) {
+            return;
+          }
+
+          placeOnTerrainLoading.value = true;
+
+          await Promise.allSettled(
+            manager.currentFeatures.value.map(async (feature) => {
+              const geometry = feature.getGeometry();
+              if (geometry) {
+                await placeGeometryOnSurface(
+                  geometry,
+                  scene,
+                  HeightReference.CLAMP_TO_TERRAIN,
+                );
+              }
+            }),
+          );
+
+          const currentEditingFeatures =
+            manager.currentSession.value?.currentFeatures;
+          if (currentEditingFeatures) {
+            manager.currentSession.value?.setCurrentFeatures(
+              currentEditingFeatures,
+            );
+          }
+
+          placeOnTerrainLoading.value = false;
         },
       };
     },

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

@@ -24,7 +24,8 @@ declare const _default: import("vue").DefineComponent<{
     cw(): Promise<void>;
     ccw(): Promise<void>;
     scale(): Promise<void>;
-    placeOnTerrain(): void;
+    placeOnTerrainLoading: import("vue").Ref<boolean>;
+    placeOnTerrain(): Promise<void>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     transformationMode: {
         type: StringConstructor;