@vcmap/ui 5.0.2 → 5.1.0-rc.2

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

@@ -0,0 +1,45 @@
+declare const _default: import("vue").DefineComponent<{
+    transformationMode: {
+        type: StringConstructor;
+        required: true;
+    };
+    featureProperties: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    allowZInput: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    showTranslate: import("vue").Ref<boolean>;
+    showRotate: import("vue").Ref<boolean>;
+    showScale: import("vue").Ref<boolean>;
+    TransformationMode: typeof TransformationMode;
+    xValue: import("vue").Ref<null>;
+    yValue: import("vue").Ref<null>;
+    zValue: import("vue").Ref<null>;
+    translate(): Promise<void>;
+    rotate(): Promise<void>;
+    cw(): Promise<void>;
+    ccw(): Promise<void>;
+    scale(): Promise<void>;
+    placeOnTerrain(): void;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    transformationMode: {
+        type: StringConstructor;
+        required: true;
+    };
+    featureProperties: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    allowZInput: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    allowZInput: boolean;
+}>;
+export default _default;
+import { TransformationMode } from '@vcmap/core';

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

@@ -1,18 +1,9 @@
 <template>
   <VcsFormSection
     :heading="$attrs.heading || 'components.vectorProperties.header'"
-    :expandable="$attrs.expandable"
-    :start-open="$attrs.startOpen"
-    :header-actions="[
-      {
-        name: 'reset',
-        title: 'components.style.reset',
-        icon: '$vcsReturn',
-        callback: () => {
-          reset();
-        },
-      },
-    ]"
+    :expandable="expandable"
+    :start-open="startOpen"
+    :header-actions="headerActions"
   >
     <v-container class="px-1 py-0">
       <v-row
@@ -27,27 +18,18 @@
         <v-col>
           <VcsSelect
             id="vp-altitude-mode"
-            :items="[
-              {
-                value: 'clampToGround',
-                text: 'components.vectorProperties.clampToGround',
-              },
-              {
-                value: 'absolute',
-                text: 'components.vectorProperties.absolute',
-              },
-              {
-                value: 'relativeToGround',
-                text: 'components.vectorProperties.relativeToGround',
-              },
-            ]"
+            :items="availableAltitudeModes"
             v-model="altitudeMode"
             dense
           />
         </v-col>
       </v-row>
       <v-row
-        v-if="altitudeMode === 'relativeToGround' && show3DProperties"
+        v-if="
+          visibleProperties.has('heightAboveGround') &&
+          altitudeMode === 'relativeToGround' &&
+          show3DProperties
+        "
         no-gutters
       >
         <v-col>
@@ -62,7 +44,7 @@
             v-model.number="heightAboveGround"
             type="number"
             unit="m"
-            :placeholder="'heightAboveGround' in value ? '0 m' : ''"
+            :placeholder="'heightAboveGround' in value ? '0' : ''"
           />
         </v-col>
       </v-row>
@@ -82,7 +64,7 @@
             v-model.number="groundLevel"
             type="number"
             unit="m"
-            :placeholder="'groundLevel' in value ? '0 m' : ''"
+            :placeholder="'groundLevel' in value ? '0' : ''"
             clearable
           />
         </v-col>
@@ -108,9 +90,7 @@
                 :disabled="!hasScaleByDistance"
                 :placeholder="
                   'scaleByDistance' in value
-                    ? index % 2 === 0
-                      ? `${scaleByDistanceDefault[index]} m`
-                      : `${scaleByDistanceDefault[index]}`
+                    ? `${scaleByDistanceDefault[index]}`
                     : ''
                 "
                 :rules="[
@@ -147,7 +127,7 @@
                 !hasEyeOffset || !isNaN(v) || 'components.validation.required',
             ]"
             :placeholder="
-              'eyeOffset' in value ? `${eyeOffsetDefault[index]} m` : ''
+              'eyeOffset' in value ? `${eyeOffsetDefault[index]}` : ''
             "
           />
         </v-col>
@@ -189,7 +169,7 @@
     </v-container>
     <v-divider
       v-if="
-        !hideDividers &&
+        showDividers &&
         show3DProperties &&
         [
           'extrudedHeight',
@@ -234,7 +214,7 @@
             v-model.number="extrudedHeight"
             type="number"
             unit="m"
-            :placeholder="'extrudedHeight' in value ? '0 m' : ''"
+            :placeholder="'extrudedHeight' in value ? '0' : ''"
             clearable
             :rules="[
               (v) => v >= 0 || isNaN(v) || 'components.validation.notValid',
@@ -315,7 +295,7 @@
             v-model.number="skirt"
             type="number"
             unit="m"
-            :placeholder="'skirt' in value ? '0 m' : ''"
+            :placeholder="'skirt' in value ? '0' : ''"
             clearable
             :rules="[
               (v) => v >= 0 || isNaN(v) || 'components.validation.notValid',
@@ -366,7 +346,7 @@
     </v-container>
     <v-divider
       v-if="
-        !hideDividers &&
+        showDividers &&
         show3DProperties &&
         [
           'modelUrl',
@@ -425,7 +405,7 @@
             dense
             v-model.number="modelHeading"
             type="number"
-            :placeholder="'modelHeading' in value ? '0 °' : ''"
+            :placeholder="'modelHeading' in value ? '0' : ''"
             unit="°"
             clearable
           />
@@ -442,7 +422,7 @@
             dense
             v-model.number="modelPitch"
             type="number"
-            :placeholder="'modelPitch' in value ? '0 °' : ''"
+            :placeholder="'modelPitch' in value ? '0' : ''"
             unit="°"
             clearable
           />
@@ -457,7 +437,7 @@
             dense
             v-model.number="modelRoll"
             type="number"
-            :placeholder="'modelRoll' in value ? '0 °' : ''"
+            :placeholder="'modelRoll' in value ? '0' : ''"
             unit="°"
             clearable
           />
@@ -482,7 +462,6 @@
     </v-container>
   </VcsFormSection>
 </template>
-
 <script>
   import { computed } from 'vue';
   import { VContainer, VRow, VCol, VDivider } from 'vuetify/lib';
@@ -498,20 +477,18 @@
   } from './composables.js';
   import VcsChipArrayInput from '../form-inputs-controls/VcsChipArrayInput.vue';
 
-  export const vectorProperties = [
+  export const genericVectorProperties = [
     'altitudeMode',
     'allowPicking',
-    'classificationType',
-    'scaleByDistance',
-    'eyeOffset',
+    'groundLevel',
     'heightAboveGround',
     'skirt',
-    'groundLevel',
     'extrudedHeight',
-    'storeysAboveGround',
-    'storeysBelowGround',
-    'storeyHeightsAboveGround',
-    'storeyHeightsBelowGround',
+  ];
+
+  export const pointVectorProperties = [
+    'eyeOffset',
+    'scaleByDistance',
     'modelUrl',
     'modelScaleX',
     'modelScaleY',
@@ -522,6 +499,20 @@
     'baseUrl',
   ];
 
+  export const nonPointVectorProperties = [
+    'classificationType',
+    'storeysAboveGround',
+    'storeysBelowGround',
+    'storeyHeightsAboveGround',
+    'storeyHeightsBelowGround',
+  ];
+
+  export const vectorProperties = [
+    ...genericVectorProperties,
+    ...nonPointVectorProperties,
+    ...pointVectorProperties,
+  ];
+
   export const scaleByDistanceDefault = [0, 1, 1, 1];
   export const eyeOffsetDefault = [0, 0, 0];
   export const dimensionsUpperCase = ['X', 'Y', 'Z'];
@@ -532,10 +523,11 @@
    * @vue-prop {import("@vcmap/core").VectorPropertiesOptions} valueDefault - The default VectorPropertiesOptions that are applied when clicking the "Reset" button.
    * @vue-prop {Array<string>} properties - The keys of the VectorPropertiesOptions that should be editable. If a key is not within this array, the corresponding input field is not shown.
    * @vue-prop {boolean} show3DProperties - Whether the 3D related properties should be shown or not.
-   * @vue-prop {boolean} hideDividers - Wether the dividers, which group similar properties, should be hidden.
+   * @vue-prop {boolean} [showDividers=true] - Wether the dividers, which group similar properties, should be shown.
    * @vue-prop {string} [heading='Vector properties'] - Title of the form section, will be translated.
    * @vue-prop {boolean} [expandable=false] - If true, form section can be toggled.
    * @vue-prop {boolean} [startOpen=false] - If form section starts open.
+   * @vue-prop {boolean} [showReset=true] - If a reset action is added to the form header.
    * @vue-event {import("@vcmap/core").VectorPropertiesOptions} input - Emits the updated VectorPropertiesOptions each time a property is changed.
    * @vue-event {import("@vcmap/core").VectorPropertiesOptions} propertyChange - Emits the updated VectorPropertiesOptions, containing only the keys that changed, each time a property is changed.
    */
@@ -570,10 +562,22 @@
         type: Boolean,
         default: true,
       },
-      hideDividers: {
+      showDividers: {
+        type: Boolean,
+        default: true,
+      },
+      expandable: {
+        type: Boolean,
+        default: false,
+      },
+      startOpen: {
         type: Boolean,
         default: false,
       },
+      showReset: {
+        type: Boolean,
+        default: true,
+      },
     },
     setup(props, { emit }) {
       const visibleProperties = computed(() => {
@@ -585,6 +589,29 @@
         'altitudeMode',
         emit,
       );
+
+      const availableAltitudeModes = computed(() => {
+        const altitudeModes = [
+          {
+            value: 'clampToGround',
+            text: 'components.vectorProperties.clampToGround',
+          },
+          {
+            value: 'absolute',
+            text: 'components.vectorProperties.absolute',
+          },
+        ];
+
+        if (visibleProperties.value.has('heightAboveGround')) {
+          altitudeModes.push({
+            value: 'relativeToGround',
+            text: 'components.vectorProperties.relativeToGround',
+          });
+        }
+
+        return altitudeModes;
+      });
+
       const heightAboveGround = usePrimitiveProperty(
         () => props.value,
         'heightAboveGround',
@@ -746,9 +773,26 @@
         emit('propertyChange', newParams);
       }
 
+      const headerActions = computed(() =>
+        props.showReset
+          ? [
+              {
+                name: 'reset',
+                title: 'components.style.reset',
+                icon: '$vcsReturn',
+                callback: () => {
+                  reset();
+                },
+              },
+            ]
+          : [],
+      );
+
       return {
+        headerActions,
         visibleProperties,
         altitudeMode,
+        availableAltitudeModes,
         heightAboveGround,
         allowPicking,
         classificationType,

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

@@ -0,0 +1,119 @@
+export const genericVectorProperties: string[];
+export const pointVectorProperties: string[];
+export const nonPointVectorProperties: string[];
+export const vectorProperties: string[];
+export const scaleByDistanceDefault: number[];
+export const eyeOffsetDefault: number[];
+export const dimensionsUpperCase: string[];
+declare const _default: import("vue").DefineComponent<{
+    value: {
+        type: ObjectConstructor;
+        default: () => void;
+    };
+    valueDefault: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    properties: {
+        type: ArrayConstructor;
+        default: () => string[];
+    };
+    show3DProperties: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showDividers: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    expandable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    startOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showReset: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    headerActions: import("vue").ComputedRef<{
+        name: string;
+        title: string;
+        icon: string;
+        callback: () => void;
+    }[]>;
+    visibleProperties: import("vue").ComputedRef<Set<any>>;
+    altitudeMode: import("vue").WritableComputedRef<any>;
+    availableAltitudeModes: import("vue").ComputedRef<{
+        value: string;
+        text: string;
+    }[]>;
+    heightAboveGround: import("vue").WritableComputedRef<any>;
+    allowPicking: import("vue").WritableComputedRef<any>;
+    classificationType: import("vue").WritableComputedRef<any>;
+    scaleByDistance: import("vue").WritableComputedRef<any>[];
+    hasScaleByDistance: import("vue").WritableComputedRef<boolean>;
+    scaleByDistanceDefault: number[];
+    eyeOffset: import("vue").WritableComputedRef<any>[];
+    hasEyeOffset: import("vue").WritableComputedRef<boolean>;
+    eyeOffsetDefault: number[];
+    groundLevel: import("vue").WritableComputedRef<any>;
+    extrudedHeight: import("vue").WritableComputedRef<any>;
+    skirt: import("vue").WritableComputedRef<any>;
+    storeysAboveGround: import("vue").WritableComputedRef<any>;
+    storeysBelowGround: import("vue").WritableComputedRef<any>;
+    storeyHeights: import("vue").ComputedRef<{}>;
+    modelUrl: import("vue").WritableComputedRef<any>;
+    modelScale: import("vue").ComputedRef<{}>;
+    modelHeading: import("vue").WritableComputedRef<any>;
+    modelPitch: import("vue").WritableComputedRef<any>;
+    modelRoll: import("vue").WritableComputedRef<any>;
+    baseUrl: import("vue").WritableComputedRef<any>;
+    reset: () => void;
+    dimensionsUpperCase: string[];
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: ObjectConstructor;
+        default: () => void;
+    };
+    valueDefault: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    properties: {
+        type: ArrayConstructor;
+        default: () => string[];
+    };
+    show3DProperties: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showDividers: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    expandable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    startOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showReset: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    value: Record<string, any>;
+    properties: unknown[];
+    expandable: boolean;
+    startOpen: boolean;
+    showReset: boolean;
+    show3DProperties: boolean;
+    showDividers: boolean;
+}>;
+export default _default;

package/src/components/vector-properties/composables.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Creates a computed property with a getter and a setter for a specific primitive object property/key of the modelled object. This composable allows to pass the computed to an v-model of a sub component. The getter returns the value of the key. The setter merges the passed value with the other object properties of the modelled object and emits the whole object as a input event, and only the changed props as an change event.
+ * @param {function():T} modelObject Getter for the property that is modelled by the component and should be updated with input event, usually this is the 'value' prop.
+ * @param {K} key The key of the modelObject that should be returned on get and updated on set.
+ * @param {function(string, unknown[]):void} emit The emit function of the component context that is using this composable.
+ * @returns {import('vue').WritableComputedRef<T[K]>} A computed with a getter and a setter.
+ * @template {Record<string, unknown>} T
+ * @template {string} K
+ */
+export function usePrimitiveProperty<T extends Record<string, unknown>, K extends string>(modelObject: () => T, key: K, emit: (arg0: string, arg1: unknown[]) => void): import("vue").WritableComputedRef<T[K]>;
+/**
+ * Creates an object with the entries of the input array as keys and computed properties as values. These have a getter and a setter for a specific entry of the array, that is an object property/key of the modelled object. This composable allows to pass the computeds to an v-model of a sub component. The getter returns the value of the array entry. The setter first merges the passed value with the other array entries, and then with the other object properties of the modelled object and emits the whole object as a input event, and only the changed props as an change event.
+ * @param {function():T} modelObject Getter for the property that is modelled by the component and should be updated with input event, usually this is the 'value' prop.
+ * @param {K} key The key of the modelObject that should be returned on get and updated on set.
+ * @param {function(string, unknown[]):void} emit The emit function of the component context that is using this composable.
+ * @param {number} arrayLength The length of the array property.
+ * @returns {import('vue').WritableComputedRef<T[K][number]>[]} An object with the provided names as keys and the corresponding computed properties with a getter and a setter.
+ * @template {Object} T
+ * @template {string} K
+ */
+export function useArrayProperty<T extends Object, K extends string>(modelObject: () => T, key: K, emit: (arg0: string, arg1: unknown[]) => void, arrayLength: number): import("vue").WritableComputedRef<T[K][number]>[];
+/**
+ * Creates a computed property that returns whether a specific key of the modelled object (value prop) is undefined or not. If set to true, the provided default value is applied to the key of the modelled object.
+ * @param {function():T} modelObject Getter for the property that is modelled by the component and should be updated with input event, usually this is the 'value' prop.
+ * @param {K} key The key of the modelObject that should be return on get and updated on set.
+ * @param {function(string, unknown[]):void} emit The emit function of the component context that is using this composable.
+ * @param {D} valueDefault  The defualt value that is set when `true` is provided to the setter of the computed property.
+ * @returns {import('vue').WritableComputedRef<boolean>} A computed ref with a setter and a getter.
+ * @template {Object} T
+ * @template {string} K
+ * @template D
+ */
+export function useHasProperty<T extends Object, K extends string, D>(modelObject: () => T, key: K, emit: (arg0: string, arg1: unknown[]) => void, valueDefault: D): import('vue').WritableComputedRef<boolean>;

package/src/components/vector-properties/composables.js

@@ -2,10 +2,12 @@ import { computed } from 'vue';
 
 /**
  * Creates a computed property with a getter and a setter for a specific primitive object property/key of the modelled object. This composable allows to pass the computed to an v-model of a sub component. The getter returns the value of the key. The setter merges the passed value with the other object properties of the modelled object and emits the whole object as a input event, and only the changed props as an change event.
- * @param {function():Object} modelObject Getter for the property that is modelled by the component and should be updated with input event, usually this is the 'value' prop.
- * @param {string} key The key of the modelObject that should be returned on get and updated on set.
- * @param {function(event: string, ...args: any[]):void} emit The emit function of the component context that is using this composable.
- * @returns {import('vue').WriteableComputedRef} A computed with a getter and a setter.
+ * @param {function():T} modelObject Getter for the property that is modelled by the component and should be updated with input event, usually this is the 'value' prop.
+ * @param {K} key The key of the modelObject that should be returned on get and updated on set.
+ * @param {function(string, unknown[]):void} emit The emit function of the component context that is using this composable.
+ * @returns {import('vue').WritableComputedRef<T[K]>} A computed with a getter and a setter.
+ * @template {Record<string, unknown>} T
+ * @template {string} K
  */
 export function usePrimitiveProperty(modelObject, key, emit) {
   return computed({
@@ -15,7 +17,7 @@ export function usePrimitiveProperty(modelObject, key, emit) {
     set(value) {
       if (modelObject()[key] !== value) {
         const newParams = structuredClone(modelObject());
-        const changedParams = { [key]: value || undefined }; // XXX boolean values need to be handled differently
+        const changedParams = { [key]: value ?? undefined };
         emit('input', Object.assign(newParams, changedParams));
         emit('propertyChange', changedParams);
       }
@@ -25,11 +27,13 @@ export function usePrimitiveProperty(modelObject, key, emit) {
 
 /**
  * Creates an object with the entries of the input array as keys and computed properties as values. These have a getter and a setter for a specific entry of the array, that is an object property/key of the modelled object. This composable allows to pass the computeds to an v-model of a sub component. The getter returns the value of the array entry. The setter first merges the passed value with the other array entries, and then with the other object properties of the modelled object and emits the whole object as a input event, and only the changed props as an change event.
- * @param {function():Object} modelObject Getter for the property that is modelled by the component and should be updated with input event, usually this is the 'value' prop.
- * @param {string} key The key of the modelObject that should be returned on get and updated on set.
- * @param {function(event: string, ...args: any[]):void} emit The emit function of the component context that is using this composable.
+ * @param {function():T} modelObject Getter for the property that is modelled by the component and should be updated with input event, usually this is the 'value' prop.
+ * @param {K} key The key of the modelObject that should be returned on get and updated on set.
+ * @param {function(string, unknown[]):void} emit The emit function of the component context that is using this composable.
  * @param {number} arrayLength The length of the array property.
- * @returns {Object<string, import('vue').WriteableComputedRef>} An object with the provided names as keys and the corresponding computed properties with a getter and a setter.
+ * @returns {import('vue').WritableComputedRef<T[K][number]>[]} An object with the provided names as keys and the corresponding computed properties with a getter and a setter.
+ * @template {Object} T
+ * @template {string} K
  */
 export function useArrayProperty(modelObject, key, emit, arrayLength) {
   return Array(arrayLength)
@@ -67,11 +71,14 @@ export function useArrayProperty(modelObject, key, emit, arrayLength) {
 
 /**
  * Creates a computed property that returns whether a specific key of the modelled object (value prop) is undefined or not. If set to true, the provided default value is applied to the key of the modelled object.
- * @param {function():Object} modelObject Getter for the property that is modelled by the component and should be updated with input event, usually this is the 'value' prop.
- * @param {string} key The key of the modelObject that should be return on get and updated on set.
- * @param {function(event: string, ...args: any[]):void} emit The emit function of the component context that is using this composable.
- * @param {*} valueDefault  The defualt value that is set when `true` is provided to the setter of the computed property.
- * @returns {import('vue').WriteableComputedRef} A computed ref with a setter and a getter.
+ * @param {function():T} modelObject Getter for the property that is modelled by the component and should be updated with input event, usually this is the 'value' prop.
+ * @param {K} key The key of the modelObject that should be return on get and updated on set.
+ * @param {function(string, unknown[]):void} emit The emit function of the component context that is using this composable.
+ * @param {D} valueDefault  The defualt value that is set when `true` is provided to the setter of the computed property.
+ * @returns {import('vue').WritableComputedRef<boolean>} A computed ref with a setter and a getter.
+ * @template {Object} T
+ * @template {string} K
+ * @template D
  */
 export function useHasProperty(modelObject, key, emit, valueDefault) {
   return computed({