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

package/src/contentTree/layerGroupContentTreeItem.js

@@ -3,13 +3,14 @@ import ContentTreeItem, {
 } from './contentTreeItem.js';
 import {
   getStateFromLayer,
+  setStyleAction,
   setViewpointAction,
 } from './layerContentTreeItem.js';
 import { StateActionState } from '../actions/stateRefAction.js';
 import { executeCallbacks } from '../callback/vcsCallback.js';
 
 /**
- * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions & { layerNames: string[], defaultViewpoint?: string }} LayerGroupContentTreeItemOptions
+ * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions & { layerNames: string[], defaultViewpoint?: string, availableStyles?: string[] }} LayerGroupContentTreeItemOptions
  * @property {Array<string>} layerNames list of LayerNames which should be activated on click
  * @property {string} [defaultViewpoint] - the name of an optional default viewpoint
  */
@@ -69,10 +70,18 @@ class LayerGroupContentTreeItem extends ContentTreeItem {
     this._listeners = [];
 
     /**
-     * @type {string|null}
+     * @type {string|undefined}
      * @private
      */
-    this._defaultViewpoint = options.defaultViewpoint || null;
+    this._defaultViewpoint = options.defaultViewpoint;
+
+    /**
+     * @type {string[]}
+     * @private
+     */
+    this._availableStyles = Array.isArray(options.availableStyles)
+      ? options.availableStyles.slice()
+      : [];
 
     this._setup();
   }
@@ -116,6 +125,13 @@ class LayerGroupContentTreeItem extends ContentTreeItem {
     this.visible = layers.some((l) => l.isSupported(this._app.maps.activeMap));
     this.state = getStateFromLayers(layers);
     setViewpointAction(this, this._app, this._defaultViewpoint);
+    setStyleAction(
+      this,
+      this._app,
+      this._listeners,
+      this._layerNames,
+      this._availableStyles,
+    );
 
     this._listeners.push(
       this._app.layers.removed.addEventListener(resetHandler),
@@ -166,6 +182,9 @@ class LayerGroupContentTreeItem extends ContentTreeItem {
     if (this._defaultViewpoint) {
       config.defaultViewpoint = this._defaultViewpoint;
     }
+    if (this._availableStyles.length > 0) {
+      config.availableStyles = this._availableStyles.slice();
+    }
     return config;
   }
 

package/src/featureInfo/AddressBalloonComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <BalloonComponent v-bind="{ ...$attrs }">
+  <BalloonComponent v-bind="{ ...$attrs }" class="address-balloon-component">
     <template #default="{ attrs }">
       <v-list-item
         lines="two"

package/src/featureInfo/BalloonComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card class="mx-auto elevation-0" v-if="position">
+  <v-card class="mx-auto elevation-0 balloon-component" v-if="position">
     <slot name="balloon-header" :attrs="{ ...$props, ...$attrs }">
       <v-list-item class="px-1">
         <template #prepend="prependScope">

package/src/featureInfo/IframeComponent.vue

@@ -1,5 +1,10 @@
 <template>
-  <iframe :src="src" :title="title" :style="{ height, width }" />
+  <iframe
+    :src="src"
+    :title="title"
+    :style="{ height, width }"
+    class="iframe-component"
+  />
 </template>
 <script>
   import { inject } from 'vue';

package/src/featureInfo/MarkdownBalloonComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <BalloonComponent v-bind="{ ...$attrs }">
+  <BalloonComponent v-bind="{ ...$attrs }" class="markdown-balloon-component">
     <VcsMarkdown :content="content" />
   </BalloonComponent>
 </template>

package/src/featureInfo/balloonHelper.js

@@ -28,7 +28,7 @@ export const balloonOffset = { x: 55, y: 25 };
  * @returns {undefined|import("@vcmap-cesium/engine").Cartesian2}
  */
 function getBalloonPositionCesium(scene, cartesian) {
-  return SceneTransforms.wgs84ToWindowCoordinates(scene, cartesian);
+  return SceneTransforms.worldToWindowCoordinates(scene, cartesian);
 }
 
 /**

package/src/i18n/de.d.ts

@@ -334,8 +334,12 @@ declare namespace messages {
             export { header_1 as header };
             export let altitudeMode: string;
             export let clampToGround: string;
+            export let clampToTerrain: string;
+            export let clampTo3DTiles: string;
             export let absolute: string;
             export let relativeToGround: string;
+            export let relativeToTerrain: string;
+            export let relativeTo3DTiles: string;
             export let groundLevel: string;
             export let classificationType: string;
             export let none: string;
@@ -354,6 +358,7 @@ declare namespace messages {
             export let modelHeading: string;
             export let modelPitch: string;
             export let modelRoll: string;
+            export let modelAutoScale: string;
             export let baseUrl: string;
             export let extrudedHeight: string;
             export let skirt: string;

package/src/i18n/de.js

@@ -217,9 +217,13 @@ const messages = {
     vectorProperties: {
       header: 'Vektor Eigenschaften',
       altitudeMode: 'Höhenmodus',
-      clampToGround: 'Auf Gelände legen',
+      clampToGround: 'Auf Grund legen',
+      clampToTerrain: 'Auf Gelände legen',
+      clampTo3DTiles: 'Auf 3D Tiles legen',
       absolute: 'Absolut',
-      relativeToGround: 'Relativ zum Gelände',
+      relativeToGround: 'Relativ zum Grund',
+      relativeToTerrain: 'Relativ zum Gelände',
+      relativeTo3DTiles: 'Relativ zu 3D Tiles',
       groundLevel: 'Geländehöhe',
       classificationType: 'Klassifizierung',
       none: 'Keine',
@@ -238,6 +242,7 @@ const messages = {
       modelHeading: 'Modell Ausrichtung',
       modelPitch: 'Modell Neigung',
       modelRoll: 'Modell Rotation',
+      modelAutoScale: 'Modellautoskalierung',
       baseUrl: 'Basis URL',
       extrudedHeight: 'Extrusion',
       skirt: 'Skirts',

package/src/i18n/en.d.ts

@@ -334,8 +334,12 @@ declare namespace messages {
             export { header_1 as header };
             export let altitudeMode: string;
             export let clampToGround: string;
+            export let clampToTerrain: string;
+            export let clampTo3DTiles: string;
             export let absolute: string;
             export let relativeToGround: string;
+            export let relativeToTerrain: string;
+            export let relativeTo3DTiles: string;
             export let groundLevel: string;
             export let classificationType: string;
             export let none: string;
@@ -354,6 +358,7 @@ declare namespace messages {
             export let modelHeading: string;
             export let modelPitch: string;
             export let modelRoll: string;
+            export let modelAutoScale: string;
             export let baseUrl: string;
             export let extrudedHeight: string;
             export let skirt: string;

package/src/i18n/en.js

@@ -217,9 +217,13 @@ const messages = {
     vectorProperties: {
       header: 'Vector properties',
       altitudeMode: 'Altitude mode',
-      clampToGround: 'Clamp to ground',
+      clampToGround: 'Drape on ground',
+      clampToTerrain: 'Drape on terrain',
+      clampTo3DTiles: 'Drape on 3D tiles',
       absolute: 'Absolute',
       relativeToGround: 'Relative to ground',
+      relativeToTerrain: 'Relative to terrain',
+      relativeTo3DTiles: 'Relative to 3D tiles',
       groundLevel: 'Ground level',
       classificationType: 'Classification',
       none: 'None',
@@ -238,6 +242,7 @@ const messages = {
       modelHeading: 'Model heading',
       modelPitch: 'Model pitch',
       modelRoll: 'Model roll',
+      modelAutoScale: 'Model auto scale',
       baseUrl: 'Base URL',
       extrudedHeight: 'Extrusion',
       skirt: 'Skirts',

package/src/legend/StyleLegendItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-list>
+  <v-list class="style-legend-item">
     <v-row no-gutters>
       <v-col
         v-for="(row, idx) in item.rows"

package/src/legend/VcsLegend.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-sheet class="overflow-y-auto">
+  <v-sheet class="overflow-y-auto vcs-legend">
     <v-expansion-panels
       variant="accordion"
       multiple

package/src/manager/collectionManager/CollectionComponent.vue

@@ -1,5 +1,6 @@
 <template>
   <vcs-expansion-panel
+    class="collection-component"
     :heading="title"
     :header-actions="actions"
     :action-button-list-overflow-count="overflowCount"

package/src/manager/contextMenu/ContextMenuComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <div @click.stop="close">
+  <div @click.stop="close" class="context-menu-component">
     <VcsActionList :actions="actions" :show-icon="true" />
   </div>
 </template>

package/src/manager/panel/PanelManagerComponent.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="vcs-panel-frame"
+    class="vcs-panel-frame panel-manager-component"
     @mouseup="setResizing(undefined)"
     @mouseleave="setResizing(undefined)"
     ref="panelFrameRef"
@@ -85,7 +85,7 @@
    * @description PanelManager rendering all Panels
    */
   export default {
-    name: 'VcsPanelManager',
+    name: 'VcsPanelManagerComponent',
     components: {
       VcsMainMap,
       PanelComponent,

package/src/manager/toolbox/GroupToolboxComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="orderedButtons.length > 0">
+  <div v-if="orderedButtons.length > 0" class="group-toolbox-component">
     <v-menu
       v-model="open"
       @update:model-value="$emit('toggle', open)"
@@ -66,7 +66,7 @@
    * @vue-computed {boolean} hasActiveAction - Whether the group has an active action.
    */
   export default {
-    name: 'ToolboxActionGroup',
+    name: 'GroupToolboxComponent',
     components: {
       VcsToolButton,
       VMenu,

package/src/manager/toolbox/SelectToolboxComponent.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="group.action"
-    class="d-flex"
+    class="d-flex select-toolbox-component"
     :class="{ 'vcs-toolbox-action-select-button--active': open }"
   >
     <VcsToolButton
@@ -75,7 +75,7 @@
    * @vue-prop {SelectToolboxComponent} group - A toolbox group of type 'select'.
    */
   export default {
-    name: 'ToolboxActionSelect',
+    name: 'SelectToolboxComponent',
     components: {
       VcsToolButton,
       VMenu,

package/src/manager/toolbox/ToolboxManagerComponent.vue

@@ -1,9 +1,10 @@
 <template>
   <v-toolbar
     v-if="toolboxOpen && orderedGroups.length > 0 && mdAndUp"
-    class="vcs-toolbox mx-auto elevation-4 opacity-80"
+    class="vcs-toolbox mx-auto elevation-4 opacity-80 toolbox-manager-component"
     :class="{
       'rounded-b': !open,
+      'vcs-toolbox__secondary': !isDefaultToolbox,
     }"
     :height="toolboxHeight"
     :style="{ zIndex }"
@@ -41,6 +42,16 @@
 </template>
 
 <style lang="scss" scoped>
+  .vcs-toolbox__secondary {
+    &.vcs-toolbox.v-theme {
+      &--light {
+        background-color: rgba(var(--v-theme-primary-lighten-3));
+      }
+      &--dark {
+        background-color: rgba(var(--v-theme-primary-darken-4));
+      }
+    }
+  }
   .vcs-toolbox {
     margin-top: 2px;
     width: fit-content;

package/src/manager/window/WindowComponent.vue

@@ -1,7 +1,7 @@
 <template>
   <v-sheet
     :id="`window-component--${windowState.id}`"
-    class="elevation-3 position-absolute d-flex flex-column"
+    class="elevation-3 position-absolute d-flex flex-column window-component"
     v-bind="$attrs"
     @dragstart="dragStart"
     @dragend="dragEnd"

package/src/manager/window/WindowManager.vue

@@ -1,5 +1,8 @@
 <template>
-  <div :class="{ 'win-container-mobile': addMobileClass }">
+  <div
+    :class="{ 'win-container-mobile': addMobileClass }"
+    class="window-manager"
+  >
     <WindowComponent
       v-for="id in componentIds"
       :key="id"

package/src/navigation/MapNavigation.vue

@@ -1,5 +1,8 @@
 <template>
-  <v-container :class="xs ? 'nav-container mobile' : 'nav-container'">
+  <v-container
+    :class="xs ? 'nav-container mobile' : 'nav-container'"
+    class="map-navigation"
+  >
     <v-row>
       <VcsCompass
         :view-mode="viewMode"

package/src/navigation/ObliqueRotation.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="d-inline-flex rounded vcs-oblique-orientation">
+  <div class="d-inline-flex rounded oblique-orientation">
     <div class="d-inline-flex rounded inner">
       <OrientationToolsButton
         @click="input(-90)"
@@ -56,7 +56,7 @@
 </script>
 
 <style lang="scss" scoped>
-  .vcs-oblique-orientation {
+  .oblique-orientation {
     box-shadow: rgba(0, 0, 0, 0.15) 0 2px 2px 0;
     .inner {
       box-shadow: rgba(0, 0, 0, 0.25) 0 -2px 2px 0 inset;

package/src/navigation/OrientationToolsButton.vue

@@ -1,6 +1,6 @@
 <template>
   <v-card
-    class="d-flex align-center justify-center text-center btn-orientation-tools"
+    class="d-flex align-center justify-center text-center btn-orientation-tools orientation-tools-button"
     v-bind="{ ...$attrs }"
     :height="height"
     :width="width"

package/src/navigation/TiltSlider.vue

@@ -1,5 +1,6 @@
 <template>
   <v-card
+    class="tilt-slider"
     :width="minWidth"
     :height="minHeight"
     v-bind="props"

package/src/navigation/VcsCompass.vue

@@ -4,7 +4,7 @@
       transform: `rotate(${compassRotation}deg)`,
     }"
     @click="$emit('update:modelValue', 0)"
-    class="d-flex flex-column justify-center align-center position-relative rounded-circle user-select-none transition-transform-200-ease"
+    class="d-flex flex-column justify-center align-center position-relative rounded-circle user-select-none transition-transform-200-ease vcs-compass"
     elevation="1"
     :height="height"
     :width="width"

package/src/navigation/VcsZoomButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded vcs-navigation-zoom">
+  <div class="rounded vcs-navigation-zoom vcs-zoom-button">
     <div class="rounded inner">
       <OrientationToolsButton
         @click="$emit('zoom-in')"

package/src/navigation/locatorHelper.js

@@ -5,8 +5,6 @@ import {
   Projection,
   VectorLayer,
   VectorStyleItem,
-  ensureFeatureAbsolute,
-  CesiumMap,
 } from '@vcmap/core';
 import { Circle, Point } from 'ol/geom';
 import { Feature } from 'ol';
@@ -34,9 +32,9 @@ function getColor(opacity, app) {
  * Place a location point and accuracy circle on the map.
  * @param {import("@vcmap/core").VectorLayer} layer The OpenLayers layer to add the features to.
  * @param {GeolocationCoordinates} point The point object containing longitude, latitude, and accuracy.
- * @param {import("../vcsUiApp.js").default} app
+ * @returns {Promise<void>}
  */
-async function placeLocationInMap(layer, point, app) {
+async function placeLocationInMap(layer, point) {
   layer.removeFeaturesById(['_tooltipLocationPoint']);
   layer.removeFeaturesById(['_tooltipLocationCircle']);
 
@@ -49,15 +47,12 @@ async function placeLocationInMap(layer, point, app) {
   });
   feature.setId('_tooltipLocationPoint');
 
-  if (app.maps.activeMap instanceof CesiumMap) {
-    await ensureFeatureAbsolute(feature, layer, app.maps.activeMap);
-  }
-
   const accuracyCircle = new Feature({
     geometry: new Circle(
       Projection.wgs84ToMercator([point.longitude, point.latitude]),
       point.accuracy,
     ),
+    olcs_altitudeMode: 'clampToGround',
   });
   accuracyCircle.setId('_tooltipLocationCircle');
   layer.addFeatures([accuracyCircle, feature]);
@@ -202,18 +197,6 @@ export function createLocatorAction(app) {
     style,
   });
 
-  const mapChangedListener = app.maps.mapActivated.addEventListener(
-    async (map) => {
-      if (map instanceof CesiumMap) {
-        const locatorFeature = vectorLayer.getFeatureById(
-          '_tooltipLocationPoint',
-        );
-        if (locatorFeature) {
-          await ensureFeatureAbsolute(locatorFeature, vectorLayer, map);
-        }
-      }
-    },
-  );
   markVolatile(vectorLayer);
   app.layers.add(vectorLayer);
 
@@ -283,7 +266,6 @@ export function createLocatorAction(app) {
   };
   const destroy = () => {
     destroyLayer();
-    mapChangedListener();
     themeListener();
     style.destroy();
     state.coordinates = undefined;

package/src/notifier/NotifierComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="notifier-component">
     <v-snackbar
       v-for="notification in notifications"
       :key="notification.id"

package/src/search/ResultItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-list-item v-if="item" v-bind="$attrs">
+  <v-list-item v-if="item" v-bind="$attrs" class="result-item">
     <template #prepend v-if="item.icon">
       <v-icon>
         {{ item.icon }}

package/src/search/ResultsComponent.vue

@@ -1,6 +1,6 @@
 <template>
   <v-list
-    class="ma-0 overflow-y-auto vcs-search-results"
+    class="ma-0 overflow-y-auto vcs-search-results results-component"
     v-model:selected="highlighted"
   >
     <ResultItem

package/src/search/SearchComponent.vue

@@ -1,6 +1,8 @@
 <template>
   <v-sheet>
-    <span class="d-flex justify-space-between align-center mt-1 ml-2">
+    <span
+      class="d-flex justify-space-between align-center mt-1 ml-2 search-component"
+    >
       <v-icon class="pa-1" :size="searchIconSize"> $vcsSearch </v-icon>
       <VcsTextField
         class="d-inline-block user-select-none w-100 mx-1"

package/src/uiConfig.d.ts

@@ -137,9 +137,13 @@ export type UiConfigObject = {
      */
     displayQuality?: import("@vcmap/core").DisplayQualityOptions | undefined;
     /**
-     * - Vuetify Theming, also see vuetify configuration https://vuetifyjs.com/en/features/theme/
+     * - Vuetify Theming, also see vuetify configuraton https://vuetifyjs.com/en/features/theme/
      */
     vuetifyTheme?: any;
+    /**
+     * - open the legend window, if new layer has a config
+     */
+    openLegendOnAdd?: boolean | undefined;
 };
 /**
  * @typedef {{
@@ -206,7 +210,8 @@ export type UiConfigObject = {
  * @property {boolean} [hideSettings] - can be used to hide the settings Window
  * @property {boolean} [overviewMapActiveOnStartup] - can be used to activate the overviewMap on startup
  * @property {import("@vcmap/core").DisplayQualityOptions} [displayQuality] - the display quality settings
- * @property {import("./vuetifyPlugins/vuetify.js").VcsThemes} [vuetifyTheme] - Vuetify Theming, also see vuetify configuration https://vuetifyjs.com/en/features/theme/
+ * @property {import("./vuetifyPlugins/vuetify.js").VcsThemes} [vuetifyTheme] - Vuetify Theming, also see vuetify configuraton https://vuetifyjs.com/en/features/theme/
+ * @property {boolean} [openLegendOnAdd] - open the legend window, if new layer has a config
  */
 /**
  * @extends {Collection<UiConfigurationItem<unknown>>}
@@ -233,7 +238,7 @@ declare class UiConfig extends Collection<UiConfigurationItem<unknown>> {
      */
     private _listeners;
     /**
-     * @type {import("vue").DeepReadonly<import("vue").UnwrapNestedRefs<Object<string, *> & UiConfigObject>>}
+     * @type {import("vue").DeepReadonly<import("vue").UnwrapNestedRefs<Record<string, *> & UiConfigObject>>}
      */
     get config(): {
         readonly [x: string]: any;
@@ -472,9 +477,13 @@ declare class UiConfig extends Collection<UiConfigurationItem<unknown>> {
             } | undefined;
         } | undefined;
         /**
-         * - Vuetify Theming, also see vuetify configuration https://vuetifyjs.com/en/features/theme/
+         * - Vuetify Theming, also see vuetify configuraton https://vuetifyjs.com/en/features/theme/
          */
         readonly vuetifyTheme?: any;
+        /**
+         * - open the legend window, if new layer has a config
+         */
+        readonly openLegendOnAdd?: boolean | undefined;
     };
 }
 import { Collection } from '@vcmap/core';

package/src/uiConfig.js

@@ -70,7 +70,8 @@ import { reactive, readonly } from 'vue';
  * @property {boolean} [hideSettings] - can be used to hide the settings Window
  * @property {boolean} [overviewMapActiveOnStartup] - can be used to activate the overviewMap on startup
  * @property {import("@vcmap/core").DisplayQualityOptions} [displayQuality] - the display quality settings
- * @property {import("./vuetifyPlugins/vuetify.js").VcsThemes} [vuetifyTheme] - Vuetify Theming, also see vuetify configuration https://vuetifyjs.com/en/features/theme/
+ * @property {import("./vuetifyPlugins/vuetify.js").VcsThemes} [vuetifyTheme] - Vuetify Theming, also see vuetify configuraton https://vuetifyjs.com/en/features/theme/
+ * @property {boolean} [openLegendOnAdd] - open the legend window, if new layer has a config
  */
 
 /**
@@ -117,7 +118,7 @@ class UiConfig extends Collection {
   }
 
   /**
-   * @type {import("vue").DeepReadonly<import("vue").UnwrapNestedRefs<Object<string, *> & UiConfigObject>>}
+   * @type {import("vue").DeepReadonly<import("vue").UnwrapNestedRefs<Record<string, *> & UiConfigObject>>}
    */
   get config() {
     return this._readonlyConfig;