@vcmap/ui 6.0.0-rc.9 → 6.0.0

package/src/components/projection/VcsProjection.vue

@@ -0,0 +1,329 @@
+<script setup>
+  import { computed, inject, ref, toRaw, useAttrs, watch } from 'vue';
+  import { VRow, VCol, VContainer } from 'vuetify/components';
+  import { Projection } from '@vcmap/core';
+  import deepEqual from 'fast-deep-equal';
+  import { getLogger } from '@vcsuite/logger';
+  import VcsCheckbox from '../form-inputs-controls/VcsCheckbox.vue';
+  import VcsButton from '../buttons/VcsButton.vue';
+  import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
+  import VcsChipArrayInput from '../form-inputs-controls/VcsChipArrayInput.vue';
+  import VcsLabel from '../form-inputs-controls/VcsLabel.vue';
+  import { NotificationType } from '../../notifier/notifier.js';
+  import { useComponentId, usePadding } from '../composables.js';
+
+  const epsgRegex = /^([a-zA-Z]+:)*(\d{4,6})$/i;
+
+  function parseEPSGCode(epsg) {
+    if (!epsg) {
+      return {};
+    }
+
+    const match = epsg.match(epsgRegex);
+    if (!match) {
+      return {};
+    }
+
+    let prefix = match[1] ? match[1].toUpperCase().replace(/:$/, '') : null;
+    const code = match[2];
+
+    if (prefix === 'EPSG') {
+      prefix = null;
+    }
+    return { prefix, code };
+  }
+
+  /**
+   * @param {string|number} epsgCode
+   * @returns {Promise<string>}
+   */
+  function getProj4FromEPSGIo(epsgCode) {
+    return fetch(`https://epsg.io/${epsgCode}.proj4`)
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error('Could not find EPSG Code');
+        }
+        return response.text();
+      })
+      .then((data) => {
+        if (data.length > 1000) {
+          throw new Error('Could not find EPSG Code');
+        }
+        return data;
+      });
+  }
+
+  const props = defineProps({
+    /**
+     * @type {import("@vcmap/core").ProjectionOptions}
+     */
+    modelValue: {
+      type: Object,
+      default: undefined,
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    hideRequestButton: {
+      type: Boolean,
+      default: false,
+    },
+    hideAlias: {
+      type: Boolean,
+      default: false,
+    },
+  });
+
+  const emit = defineEmits(['update:modelValue']);
+
+  const localValue = ref(structuredClone(toRaw(props.modelValue)));
+  // Watch for changes in prop (reassignment) and update internal
+  watch(
+    () => props.modelValue,
+    (internalValue) => {
+      const newValue = toRaw(internalValue);
+      if (!newValue || deepEqual(localValue.value, newValue)) {
+        return;
+      }
+      try {
+        localValue.value = structuredClone(newValue);
+      } catch (e) {
+        getLogger('modelHelper').error(
+          'Failed to update internal value. You may have a provided a deeply nested ref, which caused',
+          e,
+        );
+      }
+    },
+    {
+      deep: true,
+      immediate: true,
+    },
+  );
+
+  const hasLocalValue = computed({
+    get() {
+      return Object.keys(localValue?.value ?? {}).length > 0;
+    },
+    set(value) {
+      localValue.value = value ? { epsg: null } : undefined;
+    },
+  });
+
+  watch(
+    () => localValue.value?.epsg,
+    () => {
+      const { code, prefix } = parseEPSGCode(localValue.value?.epsg);
+      if (code && code !== localValue.value.code) {
+        localValue.value.epsg = code;
+      }
+      if (prefix && prefix !== localValue.value.prefix) {
+        localValue.value.prefix = prefix;
+      }
+    },
+    { immediate: true },
+  );
+
+  const app = inject('vcsApp');
+
+  const requesting = ref(false);
+
+  async function requestProj4() {
+    try {
+      requesting.value = true;
+      localValue.value.proj4 = await getProj4FromEPSGIo(localValue.value.epsg);
+    } catch (err) {
+      app.notifier.add({
+        type: NotificationType.ERROR,
+        title: 'components.projection.epsgIoRequestFailed',
+      });
+      getLogger('VcsProjection').error(err);
+    } finally {
+      requesting.value = false;
+    }
+  }
+
+  function validateProj4(proj4) {
+    return (
+      Projection.validateOptions({ ...localValue.value, proj4 }) ||
+      'components.projection.invalidProj4'
+    );
+  }
+
+  function validateEpsg(epsg) {
+    return /^\d{4,6}$/.test(epsg) || 'components.projection.invalidProj4';
+  }
+
+  watch(
+    localValue,
+    (internalValue) => {
+      const newValue = toRaw(internalValue);
+      const value = toRaw(props.modelValue);
+      if (
+        newValue !== undefined &&
+        (deepEqual(value, newValue) ||
+          !(
+            validateEpsg(newValue?.epsg) === true &&
+            Projection.validateOptions(newValue)
+          ))
+      ) {
+        return;
+      }
+      try {
+        emit(`update:modelValue`, structuredClone(newValue));
+      } catch (e) {
+        getLogger('modelHelper').error(
+          'Failed to emit value. You may have a provided a deeply nested ref, which caused',
+          e,
+        );
+      }
+    },
+    { deep: true },
+  );
+
+  const cid = useComponentId();
+  const paddingProvided = usePadding(useAttrs());
+
+  const prefix = computed({
+    get() {
+      return localValue.value?.prefix ?? '';
+    },
+    set(value) {
+      if (localValue.value === undefined) {
+        localValue.value = {};
+      }
+      localValue.value.prefix = value;
+    },
+  });
+
+  const epsg = computed({
+    get() {
+      return localValue.value?.epsg ?? '';
+    },
+    set(value) {
+      if (localValue.value === undefined) {
+        localValue.value = {};
+      }
+      localValue.value.epsg = value;
+    },
+  });
+
+  const proj4 = computed({
+    get() {
+      return localValue.value?.proj4 ?? '';
+    },
+    set(value) {
+      if (localValue.value === undefined) {
+        localValue.value = {};
+      }
+      localValue.value.proj4 = value;
+    },
+  });
+
+  const alias = computed({
+    get() {
+      return localValue.value?.alias ?? [];
+    },
+    set(value) {
+      if (localValue.value === undefined) {
+        localValue.value = {};
+      }
+      if (value.length > 0) {
+        localValue.value.alias = value;
+      } else {
+        localValue.value.alias = undefined;
+      }
+    },
+  });
+
+  // manual conditional validation
+  const errorMessages = ref();
+  watch([epsg, proj4], () => {
+    const e = validateProj4(localValue.value?.proj4);
+    errorMessages.value = e === true ? undefined : e;
+  });
+</script>
+
+<template>
+  <v-container :class="{ 'pa-0': !paddingProvided }">
+    <v-row no-gutters v-if="!required">
+      <v-col>
+        <VcsCheckbox
+          v-model="hasLocalValue"
+          label="components.projection.title"
+        ></VcsCheckbox>
+      </v-col>
+    </v-row>
+    <template v-if="required || hasLocalValue">
+      <v-row no-gutters>
+        <v-col cols="4">
+          <VcsLabel :html-for="`${cid}-epsg`" required>
+            {{ $t('components.projection.epsg') }}
+          </VcsLabel>
+        </v-col>
+        <v-col>
+          <VcsTextField clearable placeholder="EPSG" v-model.trim="prefix">
+            <template #append><p>:</p></template>
+          </VcsTextField>
+        </v-col>
+        <v-col>
+          <VcsTextField
+            :id="`${cid}-epsg`"
+            clearable
+            placeholder="code"
+            v-model.trim="epsg"
+            :rules="[validateEpsg]"
+          />
+        </v-col>
+      </v-row>
+      <v-row no-gutters>
+        <v-col cols="4">
+          <VcsLabel :html-for="`${cid}-proj4`">
+            {{ $t('components.projection.proj4') }}
+          </VcsLabel>
+        </v-col>
+        <v-col>
+          <VcsTextField
+            :id="`${cid}-proj4`"
+            clearable
+            :rules="[validateProj4]"
+            :error-messages="errorMessages"
+            v-model="proj4"
+            class="w-100"
+          >
+            <template #append>
+              <VcsButton
+                v-if="!hideRequestButton"
+                icon="mdi-download"
+                tooltip="components.projection.proj4Tooltip"
+                :loading="requesting"
+                :disabled="!/^\d{4,6}$/.test(epsg)"
+                @click="requestProj4"
+              />
+            </template>
+          </VcsTextField>
+        </v-col>
+      </v-row>
+      <v-row no-gutters v-if="!hideAlias">
+        <v-col cols="4">
+          <VcsLabel :html-for="`${cid}-alias`">
+            {{ $t('components.projection.alias') }}
+          </VcsLabel>
+        </v-col>
+        <v-col>
+          <VcsChipArrayInput :id="`${cid}-alias`" clearable v-model="alias" />
+        </v-col>
+      </v-row>
+    </template>
+  </v-container>
+</template>
+
+<style scoped lang="scss">
+  :deep(.v-input__append) {
+    margin: 0;
+  }
+</style>

package/src/components/projection/VcsProjection.vue.d.ts

@@ -0,0 +1,7 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    $emit: (event: "update:modelValue", ...args: any[]) => void;
+    $props: {
+        readonly [x: string]: any;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/src/components/section/VcsFormSection.vue

@@ -9,7 +9,6 @@
           <div class="d-flex align-center" :class="{ 'px-2': !expandable }">
             <v-btn
               :ripple="false"
-              dense
               variant="text"
               icon
               :size="fontSize * 2"

package/src/components/section/VcsFormSection.vue.d.ts

@@ -69,8 +69,8 @@ declare const _default: import("vue").DefineComponent<{
     headerActions: unknown[];
     heading: string;
     actionButtonListOverflowCount: number;
+    helpText: string;
     expandable: boolean;
     startOpen: boolean;
-    helpText: string;
 }, {}>;
 export default _default;

package/src/components/tables/VcsDataTable.vue

@@ -16,10 +16,14 @@
         <slot name="append" v-bind="scope" />
       </template>
     </VcsTreeviewSearchbar>
-    <v-data-table
+    <component
+      :is="baseComponent"
       :headers="translatedHeaders"
       :items="internalItems"
       :items-per-page="itemsPerPageRef"
+      :items-length="
+        baseComponent === 'VDataTableServer' ? serverItemsLength : null
+      "
       :search="search"
       :custom-filter="handleFilter"
       :no-data-text="
@@ -117,13 +121,14 @@
           </tr>
         </tfoot>
       </template>
-    </v-data-table>
+    </component>
   </div>
 </template>
 <script>
   import { getCurrentInstance, ref, computed, watch } from 'vue';
   import {
     VDataTable,
+    VDataTableServer,
     VList,
     VListItem,
     VListItemTitle,
@@ -173,6 +178,7 @@
       VcsButton,
       VcsTreeviewSearchbar,
       VDataTable,
+      VDataTableServer,
       VMenu,
       VIcon,
       VList,
@@ -180,6 +186,11 @@
       VListItemTitle,
     },
     props: {
+      baseComponent: {
+        type: String,
+        default: 'VDataTable',
+        validator: (type) => ['VDataTable', 'VDataTableServer'].includes(type),
+      },
       headers: {
         type: Array,
         default: () => [],

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

@@ -1,4 +1,9 @@
 declare const _default: import("vue").DefineComponent<{
+    baseComponent: {
+        type: StringConstructor;
+        default: string;
+        validator: (type: unknown) => boolean;
+    };
     headers: {
         type: ArrayConstructor;
         default: () => never[];
@@ -56,6 +61,11 @@ declare const _default: import("vue").DefineComponent<{
     showFooter: import("vue").ComputedRef<boolean>;
     forwardSlots: string[];
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    baseComponent: {
+        type: StringConstructor;
+        default: string;
+        validator: (type: unknown) => boolean;
+    };
     headers: {
         type: ArrayConstructor;
         default: () => never[];
@@ -94,11 +104,12 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     items: unknown[];
-    headers: unknown[];
     showSearchbar: boolean;
     searchbarPlaceholder: string;
+    headers: unknown[];
     itemSelectable: string;
     itemsPerPage: number;
+    baseComponent: string;
     serverItemsLength: number;
     serverPagesLength: number;
     itemsPerPageArray: unknown[];

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

@@ -23,6 +23,7 @@
     </VcsFormSection>
     <VcsVectorPropertiesComponent
       :show3-d-properties="is3D"
+      :is2-d-feature="is2DFeature"
       :value-default="defaultVectorProperties"
       :properties="availableVectorProperties"
       :show-dividers="false"
@@ -30,6 +31,7 @@
       :start-open="startOpenVectorProperties"
       :show-reset="showResetVectorProperties"
       :model-value="featureProperties"
+      :altitude-modes="altitudeModes"
       @update:model-value="updateFeatureProperties"
     />
   </v-sheet>
@@ -50,6 +52,7 @@
   import {
     CesiumMap,
     GeometryType,
+    is2DLayout,
     SessionType,
     TransformationMode,
     VectorProperties,
@@ -69,7 +72,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
@@ -157,6 +159,10 @@
           'classificationType',
         ],
       },
+      altitudeModes: {
+        type: Array,
+        default: undefined,
+      },
       expandableVectorProperties: {
         type: Boolean,
         default: false,
@@ -214,6 +220,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;
@@ -407,6 +422,7 @@
         availableModifyActions,
         availableVectorProperties,
         is3D,
+        is2DFeature,
         updateFeatureProperties,
         defaultVectorProperties: VectorProperties.getDefaultOptions(),
       };

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

@@ -18,6 +18,10 @@ declare const _default: import("vue").DefineComponent<{
         type: ArrayConstructor;
         default: () => string[];
     };
+    altitudeModes: {
+        type: ArrayConstructor;
+        default: undefined;
+    };
     expandableVectorProperties: {
         type: BooleanConstructor;
         default: boolean;
@@ -43,6 +47,7 @@ declare const _default: import("vue").DefineComponent<{
     availableModifyActions: import("vue").ShallowRef<never[]>;
     availableVectorProperties: import("vue").ShallowRef<never[]>;
     is3D: import("vue").Ref<boolean>;
+    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<{
@@ -50,6 +55,10 @@ declare const _default: import("vue").DefineComponent<{
         type: ArrayConstructor;
         default: () => string[];
     };
+    altitudeModes: {
+        type: ArrayConstructor;
+        default: undefined;
+    };
     expandableVectorProperties: {
         type: BooleanConstructor;
         default: boolean;
@@ -67,6 +76,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
 }>>, {
+    altitudeModes: unknown[];
     allowedVectorProperties: unknown[];
     expandableVectorProperties: boolean;
     startOpenVectorProperties: boolean;
@@ -79,7 +89,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

@@ -57,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>
@@ -118,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';
@@ -159,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);
@@ -180,6 +183,8 @@
         },
       );
 
+      const placeOnTerrainLoading = ref(false);
+
       return {
         showTranslate,
         showRotate,
@@ -215,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;