@vcmap/ui 6.0.0-rc.6 → 6.0.0-rc.8

package/src/components/lists/VcsTreeviewSearchbar.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="pa-2 bg-base-lighten-3 position-relative d-flex flex-row justify-space-between align-center rounded-0"
+    class="pa-2 bg-base-lighten-3 position-relative d-flex flex-row justify-space-between align-center rounded-0 vcs-treeview-searchbar"
   >
     <slot name="prepend">
       <v-icon class="search-icon my-0 ml-1" :size="iconSize - 4">

package/src/components/lists/VcsTreeviewTitle.vue

@@ -25,7 +25,11 @@
   }
 </style>
 <template>
-  <div class="title-parent pr-2" ref="titleParent">
+  <div
+    class="title-parent pr-2 vcs-treeview-title"
+    ref="titleParent"
+    @click.stop="item.clicked && !item.disabled && item.clicked($event)"
+  >
     <span>
       {{ $st(item.title || item.name) }}
     </span>

package/src/components/notification/VcsBadge.vue

@@ -1,9 +1,9 @@
 <template>
-  <span class="badge rounded-circle h-3 w-3" :class="[color]" />
+  <span class="vcs-badge rounded-circle h-3 w-3" :class="[color]" />
 </template>
 
 <style lang="scss" scoped>
-  .badge {
+  .vcs-badge {
     border: 1px solid rgb(var(--v-theme-surface)) !important;
   }
   .h-3 {

package/src/components/notification/VcsHelp.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="$slots.default || text"
-    class="ma-0 font-weight-regular rounded-0 bg-base-lighten-4"
+    class="ma-0 font-weight-regular rounded-0 bg-base-lighten-4 vcs-help"
   >
     <v-container class="py-1 px-2 vcs-help">
       <slot>

package/src/components/plugins/AbstractConfigEditor.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container class="pa-0">
+  <v-container class="pa-0 abstract-config-editor">
     <v-form v-model="isValid" @submit.prevent="submit">
       <slot />
       <div class="d-flex gc-2 px-2 pt-2 pb-1">

package/src/components/section/VcsExpansionPanel.vue

@@ -43,7 +43,11 @@
   const iconSize = useIconSize();
 </script>
 <template>
-  <v-expansion-panel :disabled="disabled" v-bind="$attrs">
+  <v-expansion-panel
+    :disabled="disabled"
+    v-bind="$attrs"
+    class="vcs-expansion-panel"
+  >
     <v-expansion-panel-title static class="px-2">
       <template #default="{ expanded }">
         <v-list-item-title ref="panelHeader">

package/src/components/style/MenuWrapper.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-sheet>
+  <v-sheet class="menu-wrapper">
     <div class="d-flex align-center py-1">
       <VcsCheckbox
         :model-value="!!modelValue"

package/src/components/style/VcsFeatureStyleComponent.vue

@@ -1,5 +1,6 @@
 <template>
   <VcsVectorStyleComponent
+    class="vcs-feature-style-component"
     :model-value="styleOptions"
     @update:fill="updateFill"
     @update:stroke="updateStroke"

package/src/components/style/VcsFillMenu.vue

@@ -1,5 +1,6 @@
 <template>
   <MenuWrapper
+    class="vcs-fill-menu"
     :value-fallback="{ color: [255, 255, 255, 1] }"
     name="components.style.fill"
     v-bind="{ ...$attrs, ...$props }"

package/src/components/style/VcsFillSelector.vue

@@ -1,5 +1,6 @@
 <template>
   <v-color-picker
+    class="vcs-fill-selector"
     :model-value="rgbaObject"
     @update:model-value="updateColor"
     mode="rgba"

package/src/components/style/VcsImageMenu.vue

@@ -1,5 +1,6 @@
 <template>
   <MenuWrapper
+    class="vcs-image-menu"
     :value-fallback="{
       radius: 10,
       fill: { color: [255, 255, 255, 1] },

package/src/components/style/VcsImageSelector.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-sheet>
+  <v-sheet class="vcs-image-selector">
     <v-container class="px-1 py-0">
       <v-row no-gutters>
         <v-col class="d-flex justify-center py-1">

package/src/components/style/VcsStrokeMenu.vue

@@ -1,5 +1,6 @@
 <template>
   <MenuWrapper
+    class="vcs-stroke-menu"
     :value-fallback="{ color: [0, 0, 0, 1], width: 1 }"
     name="components.style.stroke"
     v-bind="{ ...$attrs, ...$props }"

package/src/components/style/VcsStrokeSelector.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-sheet>
+  <v-sheet class="vcs-stroke-selector">
     <v-container class="px-1 py-0">
       <v-row no-gutters>
         <v-col>

package/src/components/style/VcsTextMenu.vue

@@ -1,5 +1,6 @@
 <template>
   <MenuWrapper
+    class="vcs-text-menu"
     :value-fallback="fallbackStyle"
     name="components.style.text"
     v-bind="{ ...$attrs, ...$props }"

package/src/components/style/VcsTextSelector.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-sheet>
+  <v-sheet class="vcs-text-selector">
     <v-container class="px-1 py-0">
       <v-row no-gutters>
         <v-col>

package/src/components/style/VcsVectorStyleComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-sheet>
+  <v-sheet class="vcs-vector-style-component">
     <component
       v-for="key in styleComponents"
       :key="key"

package/src/components/tables/VcsDataTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="vcs-data-table">
     <VcsTreeviewSearchbar
       v-if="showSearchbar"
       :placeholder="$st(searchbarPlaceholder)"

package/src/components/tables/VcsTable.vue

@@ -1,5 +1,6 @@
 <template>
   <VcsDataTable
+    class="vcs-table"
     v-bind="$attrs"
     :items="items"
     :headers="[keyHeader, valueHeader]"

package/src/components/tables/VcsTableCell.vue

@@ -37,7 +37,7 @@
 </script>
 
 <template>
-  <td ref="td" :style="{ 'max-width': width }">
+  <td ref="td" :style="{ 'max-width': width }" class="vcs-table-cell">
     <component
       :is="tag"
       :class="{

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

@@ -1,5 +1,5 @@
 <template>
-  <v-sheet>
+  <v-sheet class="vcs-feature-editing-window">
     <VcsFormSection
       v-if="session?.type === SessionType.SELECT"
       heading="components.editor.modifyHeader"
@@ -99,18 +99,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
@@ -194,36 +204,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,
@@ -297,7 +278,9 @@
       function getAllowedModifyActions() {
         const allowedModes = getAllowedEditorTransformationModes(
           currentGeometryTypes.value.types,
-          currentGeometryTypes.value.nFeatures,
+          features.value,
+          layer.value,
+          is3D.value,
         );
 
         const allowedActions = allowedModes.map((mode) => {

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;
@@ -41,7 +43,7 @@ declare const _default: import("vue").DefineComponent<{
     availableModifyActions: import("vue").ShallowRef<never[]>;
     availableVectorProperties: import("vue").ShallowRef<never[]>;
     is3D: import("vue").Ref<boolean>;
-    updateFeatureProperties: (update: import("@vcmap/core").VectorPropertiesOptions) => Promise<void>;
+    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: {

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

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

@@ -1,5 +1,6 @@
 <template>
   <VcsFormSection
+    class="vcs-vector-properties-component"
     :heading="$attrs.heading || 'components.vectorProperties.header'"
     :expandable="expandable"
     :start-open="startOpen"
@@ -21,13 +22,7 @@
             />
           </v-col>
         </v-row>
-        <v-row
-          v-if="
-            visibleProperties.has('heightAboveGround') &&
-            localValue.altitudeMode === 'relativeToGround'
-          "
-          no-gutters
-        >
+        <v-row v-if="visibleProperties.has('heightAboveGround')" no-gutters>
           <v-col>
             <VcsLabel :html-for="`${cid}-vp-height-above-ground`">{{
               $t('components.vectorProperties.heightAboveGround')
@@ -40,7 +35,7 @@
               :hide-spin-buttons="true"
               type="number"
               unit="m"
-              placeholder="0"
+              clearable
             />
           </v-col>
         </v-row>
@@ -345,6 +340,7 @@
             'modelHeading',
             'modelPitch',
             'modelRoll',
+            'modelAutoScale',
             'baseUrl',
           ].some((prop) => visibleProperties.has(prop))
         "
@@ -440,6 +436,16 @@
             />
           </v-col>
         </v-row>
+        <v-row v-if="visibleProperties.has('modelAutoScale')" no-gutters>
+          <v-col cols="6">
+            <VcsLabel>{{
+              $t('components.vectorProperties.modelAutoScale')
+            }}</VcsLabel>
+          </v-col>
+          <v-col>
+            <VcsCheckbox v-model="localValue.modelAutoScale" />
+          </v-col>
+        </v-row>
         <v-row v-if="visibleProperties.has('baseUrl')" no-gutters>
           <v-col>
             <VcsLabel :html-for="`${cid}-vp-base-url`">{{
@@ -494,6 +500,7 @@
     'modelHeading',
     'modelPitch',
     'modelRoll',
+    'modelAutoScale',
     'baseUrl',
   ];
 
@@ -595,6 +602,14 @@
             value: 'clampToGround',
             title: 'components.vectorProperties.clampToGround',
           },
+          {
+            value: 'clampToTerrain',
+            title: 'components.vectorProperties.clampToTerrain',
+          },
+          {
+            value: 'clampTo3DTiles',
+            title: 'components.vectorProperties.clampTo3DTiles',
+          },
           {
             value: 'absolute',
             title: 'components.vectorProperties.absolute',
@@ -602,10 +617,20 @@
         ];
 
         if (visibleProperties.value.has('heightAboveGround')) {
-          altitudeModes.push({
-            value: 'relativeToGround',
-            title: 'components.vectorProperties.relativeToGround',
-          });
+          altitudeModes.push(
+            {
+              value: 'relativeToGround',
+              title: 'components.vectorProperties.relativeToGround',
+            },
+            {
+              value: 'relativeToTerrain',
+              title: 'components.vectorProperties.relativeToTerrain',
+            },
+            {
+              value: 'relativeTo3DTiles',
+              title: 'components.vectorProperties.relativeTo3DTiles',
+            },
+          );
         }
 
         return altitudeModes;

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

@@ -75,7 +75,7 @@ declare const _default: import("vue").DefineComponent<{
             toString: () => string;
         } | 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;
+        heightAboveGround: number | undefined;
         getHeightAboveGround: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => number;
         skirt: number;
         getSkirt: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => number;
@@ -106,7 +106,7 @@ declare const _default: import("vue").DefineComponent<{
         modelRoll: number;
         getModelRoll: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => number;
         modelOptions: Record<string, unknown> | undefined;
-        getModelOptions: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => Record<string, unknown>;
+        getModelOptions: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => Record<string, unknown> | undefined;
         modelAutoScale: boolean;
         getModelAutoScale: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => boolean;
         baseUrl: string | undefined;
@@ -210,6 +210,7 @@ declare const _default: import("vue").DefineComponent<{
         getPrimitiveOptions: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => import("@vcmap/core", { with: { "resolution-mode": "import" } }).VectorPropertiesPrimitiveOptions<import("@vcmap/core", { with: { "resolution-mode": "import" } }).PrimitiveOptionsType> | undefined;
         getPrimitive: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => import("@vcmap/core", { with: { "resolution-mode": "import" } }).VectorPropertiesPrimitive | null;
         getModel: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => import("@vcmap/core", { with: { "resolution-mode": "import" } }).VectorPropertiesModelOptions | null;
+        renderAs: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => "geometry" | "model" | "primitive";
         setVcsMeta: (vcsMeta: import("@vcmap/core", { with: { "resolution-mode": "import" } }).VcsMeta) => void;
         setValues: (options: import("@vcmap/core", { with: { "resolution-mode": "import" } }).VectorPropertiesOptions) => void;
         getValues: () => import("@vcmap/core", { with: { "resolution-mode": "import" } }).VectorPropertiesOptions;

package/src/components/viewpoint/VcsViewpointComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-sheet>
+  <v-sheet class="vcs-viewpoint-component">
     <VcsFormSection
       heading="components.viewpoint.general"
       :expandable="expandable"

package/src/components/viewpoint/VcsViewpointEditor.vue

@@ -1,5 +1,6 @@
 <template>
   <AbstractConfigEditor
+    class="vcs-viewpoint-editor"
     @submit="apply"
     @cancel="cancel"
     @reset="reset"

package/src/contentTree/LayerTree.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="layer-tree">
     <VcsTreeview
       v-if="tree && tree.length"
       :items="tree"

package/src/contentTree/layerContentTreeItem.d.ts

@@ -11,6 +11,14 @@
  * @param {string|import("@vcmap/core").Viewpoint=} viewpoint
  */
 export function setViewpointAction(item: import("./contentTreeItem.js").default, app: import("@src/vcsUiApp.js").default, viewpoint?: (string | import("@vcmap/core").Viewpoint) | undefined): void;
+/**
+ * @param {import("./contentTreeItem.js").default} item
+ * @param {import("@src/vcsUiApp.js").default} app
+ * @param {Array<Function>} listeners
+ * @param {Array<string>} layerNames
+ * @param {Array<string>=} availableStyles
+ */
+export function setStyleAction(item: import("./contentTreeItem.js").default, app: import("@src/vcsUiApp.js").default, listeners: Array<Function>, layerNames: Array<string>, availableStyles?: Array<string> | undefined): void;
 /**
  * @param {import("@vcmap/core").Layer} layer
  * @returns {StateActionState}
@@ -51,11 +59,6 @@ declare class LayerContentTreeItem extends VcsObjectContentTreeItem<LayerContent
      * @private
      */
     private get _layer();
-    /**
-     * @param {Array<string>=} availableStyles
-     * @private
-     */
-    private _setStyleAction;
     /**
      * @private
      */

package/src/contentTree/layerContentTreeItem.js

@@ -43,6 +43,47 @@ export function setViewpointAction(item, app, viewpoint) {
   }
 }
 
+/**
+ * @param {import("./contentTreeItem.js").default} item
+ * @param {import("@src/vcsUiApp.js").default} app
+ * @param {Array<Function>} listeners
+ * @param {Array<string>} layerNames
+ * @param {Array<string>=} availableStyles
+ */
+export function setStyleAction(
+  item,
+  app,
+  listeners,
+  layerNames,
+  availableStyles,
+) {
+  const name = 'StyleSelector';
+  item.removeAction(name);
+  if (Array.isArray(availableStyles) && availableStyles.length > 0) {
+    const { action, destroy } = createModalAction(
+      {
+        name,
+        icon: '$vcsColorSwatch',
+        title: 'content.styleAction.title',
+      },
+      {
+        component,
+        position: {
+          width: 200,
+        },
+        props: reactive({
+          availableStyles: availableStyles.slice(),
+          layerNames: layerNames.slice(),
+        }),
+      },
+      app,
+      vcsAppSymbol,
+    );
+    item.addAction(action, 4);
+    listeners.push(destroy);
+  }
+}
+
 /**
  * @param {import("@vcmap/core").Layer} layer
  * @returns {StateActionState}
@@ -101,38 +142,6 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
     return this._app.layers.getByKey(this._layerName);
   }
 
-  /**
-   * @param {Array<string>=} availableStyles
-   * @private
-   */
-  _setStyleAction(availableStyles) {
-    const name = 'StyleSelector';
-    this.removeAction(name);
-    if (Array.isArray(availableStyles) && availableStyles.length > 0) {
-      const { action, destroy } = createModalAction(
-        {
-          name,
-          icon: '$vcsColorSwatch',
-          title: 'content.styleAction.title',
-        },
-        {
-          component,
-          position: {
-            width: 200,
-          },
-          props: reactive({
-            availableStyles: availableStyles.slice(),
-            layerName: this._layerName,
-          }),
-        },
-        this._app,
-        vcsAppSymbol,
-      );
-      this.addAction(action, 4);
-      this._listeners.push(destroy);
-    }
-  }
-
   /**
    * @private
    */
@@ -165,8 +174,13 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
    */
   _setProperties(properties) {
     super._setProperties(properties);
-
-    this._setStyleAction(properties.availableStyles);
+    setStyleAction(
+      this,
+      this._app,
+      this._listeners,
+      [this._layerName],
+      properties.availableStyles,
+    );
     setViewpointAction(this, this._app, properties.defaultViewpoint);
   }
 

package/src/contentTree/layerGroupContentTreeItem.d.ts

@@ -2,6 +2,7 @@ export default LayerGroupContentTreeItem;
 export type LayerGroupContentTreeItemOptions = import("./contentTreeItem.js").ContentTreeItemOptions & {
     layerNames: string[];
     defaultViewpoint?: string;
+    availableStyles?: string[];
 };
 /**
  * A layer group. When clicked will try to activate all layers in the group or deactivate all layer in the group if all are active.
@@ -25,10 +26,15 @@ declare class LayerGroupContentTreeItem extends ContentTreeItem {
      */
     private _listeners;
     /**
-     * @type {string|null}
+     * @type {string|undefined}
      * @private
      */
     private _defaultViewpoint;
+    /**
+     * @type {string[]}
+     * @private
+     */
+    private _availableStyles;
     /**
      * @type {Array<import("@vcmap/core").Layer>}
      * @private