@vcmap/ui 5.0.0-rc.17 → 5.0.0-rc.20

package/src/components/lists/VcsActionList.vue

@@ -52,6 +52,7 @@
    * @property {string} [icon] - icon rendered on the button. If no icon provided, item is rendered in overflow
    * @property {Function} callback - callback function is triggered when the button is clicked
    * @property {boolean} [active=false] - optional state of button. If active, button is rendered in primary color
+   * @property {boolean} [background=false] - optional background state. If active and background, button is rendered in primary color outlined
    */
 
   /**
@@ -64,6 +65,7 @@
     icon: [undefined, String],
     callback: Function,
     active: [undefined, Boolean],
+    background: [undefined, Boolean],
   };
 
   /**

package/src/components/lists/VcsList.vue

@@ -31,16 +31,20 @@
           </v-icon>
         </v-list-item-action>
 
-        <v-list-item-content
-          :title="$t(tooltip || title)"
-        >
+        <v-list-item-content>
           <v-icon v-if="icon">
             {{ icon }}
           </v-icon>
 
-          <v-list-item-title>
-            {{ $t(title) }}
-          </v-list-item-title>
+          <VcsTooltip
+            :tooltip="tooltip || title"
+          >
+            <template #activator="{ on, attrs }">
+              <v-list-item-title v-bind="attrs" v-on="on">
+                {{ $t(title) }}
+              </v-list-item-title>
+            </template>
+          </VcsTooltip>
 
           <vcs-action-button-list
             v-if="actions?.length > 0"
@@ -85,7 +89,6 @@
         </v-list-item-action>
 
         <v-list-item-content
-          :title="$t(item.tooltip || item.title)"
           :class="[selectable ? 'cursor-pointer' : '']"
           @click="select(item, $event)"
         >
@@ -93,9 +96,15 @@
             {{ item.icon }}
           </v-icon>
 
-          <v-list-item-title>
-            {{ $t(item.title) }}
-          </v-list-item-title>
+          <VcsTooltip
+            :tooltip="item.tooltip || item.title"
+          >
+            <template #activator="{ on, attrs }">
+              <v-list-item-title v-bind="attrs" v-on="on">
+                {{ $t(item.title) }}
+              </v-list-item-title>
+            </template>
+          </VcsTooltip>
 
           <vcs-action-button-list
             v-if="item.actions?.length > 0"
@@ -122,6 +131,7 @@
     VListItemTitle,
   } from 'vuetify/lib';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
+  import VcsTooltip from '../notification/VcsTooltip.vue';
   import VcsTreeviewSearchbar from './VcsTreeviewSearchbar.vue';
 
   /**
@@ -165,6 +175,7 @@
     components: {
       VcsTreeviewSearchbar,
       VcsActionButtonList,
+      VcsTooltip,
       VList,
       VListItem,
       VListItemContent,
@@ -410,8 +421,6 @@
     .v-list{
       .v-list-item {
         padding: 4px 8px 4px 16px;
-        display: grid;
-        grid-template-columns: auto auto;
         &:after{
           display: none;
         }

package/src/components/lists/VcsTreeviewLeaf.vue

@@ -5,7 +5,6 @@
   >
     <div
       class="position-relative col-8 pa-0 d-flex align-center vcs-treeview-leaf"
-      :title="$t(item.tooltip || item.title)"
     >
       <span
         v-if="item.icon"
@@ -18,8 +17,19 @@
         />
         <ImageElementInjector :element="item.icon" v-else />
       </span>
-      <span class="vcs-treeview-item-title">{{ $t(item.title) }}</span>
+      <VcsTooltip
+        :tooltip="item.tooltip || item.title"
+      >
+        <template #activator="{ on, attrs }">
+          <span
+            v-bind="attrs"
+            v-on="on"
+            class="vcs-treeview-item-title"
+          >{{ $t(item.title) }}</span>
+        </template>
+      </VcsTooltip>
     </div>
+
     <VcsActionButtonList
       v-if="item.actions.length > 0"
       :actions="item.actions"
@@ -44,6 +54,7 @@
   import { VIcon } from 'vuetify/lib';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
   import ImageElementInjector from '../imageElementInjector.vue';
+  import VcsTooltip from '../notification/VcsTooltip.vue';
 
   /**
    * @description
@@ -53,6 +64,7 @@
    */
   export default {
     components: {
+      VcsTooltip,
       VcsActionButtonList,
       VIcon,
       ImageElementInjector,

package/src/components/notification/VcsTooltip.vue

@@ -6,7 +6,7 @@
     :top="tooltipPosition === 'top'"
     :left="tooltipPosition === 'left'"
     :right="tooltipPosition === 'right'"
-    :open-delay="$attrs.openDelay || 200"
+    transition="expand-x-transition"
     v-bind="{...$props, ...$attrs}"
   >
     <template #activator="{ on, attrs }">

package/src/contentTree/layerContentTreeItem.js

@@ -139,7 +139,7 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
    * @private
    */
   _setLayerExtentAction() {
-    const name = 'LayerExtentAction';
+    const name = 'content.layerExtentAction.name';
     this.removeAction(name);
     if (this._layer) {
       const { extent } = this._layer.toJSON();
@@ -147,7 +147,7 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
         const viewpoint = Viewpoint.createViewpointFromExtent(this._layer.extent);
         const action = createGoToViewpointAction(
           {
-            name: 'LayerExtentAction',
+            name,
             title: 'content.layerExtentAction.title',
           },
           viewpoint,

package/src/featureInfo/BalloonComponent.vue

@@ -40,9 +40,9 @@
           <v-list-item class="px-2">
             <v-list-item-content>
               <v-list-item-title>
-                {{ name }}
+                {{ $t(name) }}
               </v-list-item-title>
-              <v-list-item-subtitle>{{ value }}</v-list-item-subtitle>
+              <v-list-item-subtitle>{{ $t(value) }}</v-list-item-subtitle>
             </v-list-item-content>
           </v-list-item>
         </v-list>

package/src/featureInfo/abstractFeatureInfoView.js

@@ -235,7 +235,7 @@ class AbstractFeatureInfoView extends VcsObject {
    * Called by `getProperties()` to pass attributes as props object to the VueComponent of this view.
    * May be overwritten by classes extending AbstractFeatureInfoView.
    * It filters attributes of the feature by keys, performs value and key mapping, if provided.
-   * @param {undefined|import("ol").Feature<import("ol/geom/Geometry").default>|import("@vcmap/cesium").Cesium3DTileFeature|import("@vcmap/cesium").Cesium3DTilePointFeature} feature
+   * @param {undefined|import("ol").Feature<import("ol/geom/Geometry").default>|import("@vcmap-cesium/engine").Cesium3DTileFeature|import("@vcmap-cesium/engine").Cesium3DTilePointFeature} feature
    * @returns {Object}
    */
   getAttributes(feature) {

package/src/featureInfo/addressBalloonFeatureInfoView.js

@@ -69,7 +69,7 @@ class AddressBalloonFeatureInfoView extends BalloonFeatureInfoView {
 
   /**
    * derives address attributes from addressKeys
-   * @param {undefined|import("ol").Feature<import("ol/geom/Geometry").default>|import("@vcmap/cesium").Cesium3DTileFeature|import("@vcmap/cesium").Cesium3DTilePointFeature} feature
+   * @param {undefined|import("ol").Feature<import("ol/geom/Geometry").default>|import("@vcmap-cesium/engine").Cesium3DTileFeature|import("@vcmap-cesium/engine").Cesium3DTilePointFeature} feature
    * @returns {Object}
    */
   getAttributes(feature) {

package/src/featureInfo/balloonFeatureInfoView.js

@@ -1,6 +1,6 @@
 import { Feature } from 'ol';
 import { getCenter } from 'ol/extent.js';
-import { Cartographic, Entity, Math as CesiumMath } from '@vcmap/cesium';
+import { Cartographic, Entity, Math as CesiumMath } from '@vcmap-cesium/engine';
 import { Projection } from '@vcmap/core';
 import { check } from '@vcsuite/check';
 import AbstractFeatureInfoView from './abstractFeatureInfoView.js';

package/src/featureInfo/balloonHelper.js

@@ -1,4 +1,4 @@
-import { Cartesian2, Cartographic, SceneTransforms } from '@vcmap/cesium';
+import { Cartesian2, Cartographic, SceneTransforms } from '@vcmap-cesium/engine';
 import { CesiumMap, ObliqueMap, OpenlayersMap, Projection, transformToImage } from '@vcmap/core';
 import { unByKey } from 'ol/Observable.js';
 import {
@@ -13,9 +13,9 @@ import {
 export const balloonOffset = { x: 55, y: 25 };
 
 /**
- * @param {import("@vcmap/cesium").Scene} scene
- * @param {import("@vcmap/cesium").Cartesian3} cartesian
- * @returns {undefined|import("@vcmap/cesium").Cartesian2}
+ * @param {import("@vcmap-cesium/engine").Scene} scene
+ * @param {import("@vcmap-cesium/engine").Cartesian3} cartesian
+ * @returns {undefined|import("@vcmap-cesium/engine").Cartesian2}
  */
 function getBalloonPositionCesium(scene, cartesian) {
   return SceneTransforms.wgs84ToWindowCoordinates(scene, cartesian);
@@ -24,7 +24,7 @@ function getBalloonPositionCesium(scene, cartesian) {
 /**
  * @param {import("@vcmap/core").OpenlayersMap} olMap
  * @param {import("ol/coordinate").Coordinate} position
- * @returns {undefined|import("@vcmap/cesium").Cartesian2}
+ * @returns {undefined|import("@vcmap-cesium/engine").Cartesian2}
  */
 function getBalloonPositionOL(olMap, position) {
   const pixel = olMap.getPixelFromCoordinate(position);
@@ -62,7 +62,7 @@ export async function getBalloonPosition(app, position) {
  * sets the windowPosition of a balloon
  * @param {WindowManager} windowManager
  * @param {string} id - windowId of balloon
- * @param {import("@vcmap/cesium").Cartesian2|undefined} windowPosition
+ * @param {import("@vcmap-cesium/engine").Cartesian2|undefined} windowPosition
  * @param {HTMLElement} target - the map's target { @link @import("@vcmap/core").MapCollection }
  */
 export function setBalloonPosition(windowManager, id, windowPosition, target) {

package/src/featureInfo/featureInfo.js

@@ -22,7 +22,7 @@ import {
   Cesium3DTilePointFeature,
   Color,
   Entity,
-} from '@vcmap/cesium';
+} from '@vcmap-cesium/engine';
 import { Feature } from 'ol';
 import { check, checkMaybe } from '@vcsuite/check';
 
@@ -36,7 +36,7 @@ import BalloonFeatureInfoView from './balloonFeatureInfoView.js';
 import { defaultPrimaryColor } from '../vuePlugins/vuetify.js';
 import { ToolboxType } from '../manager/toolbox/toolboxManager.js';
 
-/** @typedef {import("ol").Feature<import("ol/geom/Geometry").default>|import("@vcmap/cesium").Cesium3DTileFeature|import("@vcmap/cesium").Cesium3DTilePointFeature|import("@vcmap/cesium").Entity} FeatureType */
+/** @typedef {import("ol").Feature<import("ol/geom/Geometry").default>|import("@vcmap-cesium/engine").Cesium3DTileFeature|import("@vcmap-cesium/engine").Cesium3DTilePointFeature|import("@vcmap-cesium/engine").Entity} FeatureType */
 
 /**
  * @typedef {Object} FeatureInfoEvent

package/src/i18n/de.js

@@ -8,6 +8,9 @@ const messages = {
     menu: {
       tooltip: 'Menü',
     },
+    share: {
+      tooltip: 'Den aktuellen Kartenausschnitt teilen.',
+    },
   },
   content: {
     title: 'Inhalte',
@@ -17,12 +20,6 @@ const messages = {
     infoAction: {
       title: 'Weitere Informationen',
     },
-    stateAction: {
-      titleInactive: 'Deaktiviert',
-      titleActive: 'Aktiviert',
-      titleIndeterminate: 'Unbestimmbar',
-      titleLoading: 'Lädt...',
-    },
     viewpointAction: {
       title: 'Springe zur Ansicht',
     },
@@ -30,7 +27,8 @@ const messages = {
       title: 'Öffne Stil Auswahl',
     },
     layerExtentAction: {
-      title: 'Jump to layer extent',
+      name: 'Ebenenausdehnung',
+      title: 'Auf Ebenenausdehnung zoomen',
     },
   },
   navigation: {
@@ -38,8 +36,9 @@ const messages = {
     obliqueRightTooltip: 'Schrägluftbild nach rechts drehen',
     zoomInTooltip: 'Hineinzoomen',
     zoomOutTooltip: 'Herauszoomen',
-    pitchTooltip: 'Kamera pitch: {0}°',
+    pitchTooltip: 'Kameraneigung: {0}°',
     overviewMapTooltip: 'Übersichtskarte',
+    homeButton: 'Springe zur Startansicht',
   },
   categoryManager: {
     title: 'Komponenten',
@@ -76,6 +75,7 @@ const messages = {
   legend: {
     title: 'Legende',
     tooltip: 'Legende',
+    empty: 'Aktuell sind keine Legendeneinträge verfügbar.',
     openInNew: 'In neuem Browser Tab öffnen',
     defaultLabelText: 'Text',
   },

package/src/i18n/en.js

@@ -8,6 +8,9 @@ const messages = {
     menu: {
       tooltip: 'Menu',
     },
+    share: {
+      tooltip: 'Share current view of the map.',
+    },
   },
   content: {
     title: 'Content',
@@ -17,12 +20,6 @@ const messages = {
     infoAction: {
       title: 'Info',
     },
-    stateAction: {
-      titleInactive: 'Inactive',
-      titleActive: 'Active',
-      titleIndeterminate: 'Indetermine',
-      titleLoading: 'Loading',
-    },
     viewpointAction: {
       title: 'Go to viewpoint',
     },
@@ -30,6 +27,7 @@ const messages = {
       title: 'Open Style selector',
     },
     layerExtentAction: {
+      name: 'Layer extent',
       title: 'Jump to layer extent',
     },
   },
@@ -40,6 +38,7 @@ const messages = {
     zoomOutTooltip: 'Zoom out',
     pitchTooltip: 'Camera pitch: {0}°',
     overviewMapTooltip: 'Overview Map',
+    homeButton: 'Go to starting view',
   },
   categoryManager: {
     title: 'Components',
@@ -76,6 +75,7 @@ const messages = {
   legend: {
     title: 'Legend',
     tooltip: 'Legend',
+    empty: 'Currently there are no legend entries available.',
     openInNew: 'Open in new tab',
     defaultLabelText: 'Text',
   },

package/src/legend/legendHelper.js

@@ -1,5 +1,5 @@
 import { getShapeFromOptions } from '@vcmap/core';
-import { ref } from 'vue';
+import { shallowRef } from 'vue';
 
 /**
  * @enum {string}
@@ -106,6 +106,7 @@ export function getImageSrcFromShape(image) {
  * @typedef {Object} LegendEntry
  * @property {string} key
  * @property {string} title - layer or entry name
+ * @property {boolean} [open=true] - panel state of entry
  * @property {Array<LegendItem>} legend - legend properties
  * @property {Array<VcsAction>} actions - popout actions
  */
@@ -130,7 +131,7 @@ export function createLayerLegendEntry(key, title, legend) {
       });
     }
   });
-  return { key, title, legend, actions };
+  return { key, title, legend, actions, open: true };
 }
 
 /**
@@ -142,7 +143,7 @@ export function getLegendEntries(app) {
   /**
    * @type {import("vue").Ref<Array<LegendEntry>>}>}
    */
-  const entries = ref([]);
+  const entries = shallowRef([]);
   /**
    * @type {Object<string,function():void>}
    */
@@ -153,10 +154,8 @@ export function getLegendEntries(app) {
    */
   function removeEntryForLayer(layer) {
     const layerName = layer.name;
-    const index = entries.value.findIndex(({ key }) => { return key === layerName; });
-    if (index >= 0) {
-      entries.value.splice(index, 1);
-    }
+    // reassign to trigger update
+    entries.value = entries.value.filter(({ key }) => key !== layerName);
     if (styleChangedListener[layerName]) {
       styleChangedListener[layerName]();
       delete styleChangedListener[layerName];
@@ -176,7 +175,8 @@ export function getLegendEntries(app) {
       const legend = layer.style?.properties?.legend ?? layer.properties?.legend;
       if (legend) {
         const legendEntry = createLayerLegendEntry(key, title, legend);
-        entries.value.push(legendEntry);
+        // use spread since push won't trigger updates. Put new entries at the start
+        entries.value = [legendEntry, ...entries.value];
       }
       if (layer.styleChanged) {
         styleChangedListener[layer.name] = layer.styleChanged.addEventListener(() => syncLayerLegendEntries(layer));

package/src/legend/vcsLegend.vue

@@ -1,16 +1,18 @@
 <template>
   <v-card
     class="overflow-y-auto"
-    max-height="500"
   >
     <v-expansion-panels
       accordion
       multiple
+      v-if="entries.length > 0"
+      v-model="panels"
     >
       <v-expansion-panel
         v-for="(entry,i) in entries"
         :key="i"
         class="pa-0 ma-0"
+        @change="entry.open = !entry.open"
       >
         <v-expansion-panel-header hide-actions>
           {{ $t(entry.title) }}
@@ -27,7 +29,13 @@
           <v-list dense>
             <div v-for="(item, idx) in entry.legend" :key="idx">
               <div v-if="item.type === LegendType.Image" class="mx-2">
-                <v-img :src="$t(item.src)" max-width="287" class="mx-2" :title="item.tooltip" />
+                <img
+                  :src="$t(item.src)"
+                  max-width="287"
+                  max-height="auto"
+                  class="mx-2 legend-image"
+                  :title="item.tooltip"
+                >
               </div>
               <div v-else-if="item.type === LegendType.Iframe" class="mx-2">
                 <iframe
@@ -45,6 +53,9 @@
         </v-expansion-panel-content>
       </v-expansion-panel>
     </v-expansion-panels>
+    <v-sheet v-else class="ma-2">
+      {{ $t('legend.empty') }}
+    </v-sheet>
   </v-card>
 </template>
 
@@ -58,8 +69,9 @@
     VExpansionPanelContent,
     VIcon,
     VList,
-    VImg,
+    VSheet,
   } from 'vuetify/lib';
+  import { computed } from 'vue';
   import { LegendType } from './legendHelper.js';
   import StyleLegendItem from './styleLegendItem.vue';
   import VcsTreeviewLeaf from '../components/lists/VcsTreeviewLeaf.vue';
@@ -67,6 +79,7 @@
   /**
    * @description A component rendering configured legend information for active layers.
    * @vue-prop {import("vue").Ref<Array<LegendEntry>>} entries - legend entries to be displayed
+   * @vue-computed {import("vue").ComputedRef<number[]>} panels - derives indices from entries array to define all panels as open
    */
   export default {
     name: 'VcsLegend',
@@ -80,7 +93,7 @@
       VExpansionPanelContent,
       VIcon,
       VList,
-      VImg,
+      VSheet,
     },
     props: {
       entries: {
@@ -88,7 +101,7 @@
         required: true,
       },
     },
-    setup() {
+    setup(props) {
       /**
        * adapts the iframe height on load
        * @param {string} id - iframe's html id
@@ -98,9 +111,19 @@
         iframe.style.height = `${iframe.contentWindow.document.documentElement.scrollHeight}px`;
       };
 
+      /**
+       * Sets all entry panels open
+       * @type {import("vue").ComputedRef<number[]>}
+       */
+      const panels = computed(() => {
+        return [...Array(props.entries.length).keys()]
+          .filter((p, idx) => !!props.entries[idx].open);
+      });
+
       return {
         LegendType,
         setIframeHeight,
+        panels,
       };
     },
   };
@@ -115,4 +138,9 @@
     max-width: 189px;
   }
 }
+.legend-image {
+  max-width: 287px;
+  height: auto;
+  width: auto;
+}
 </style>

package/src/manager/toolbox/ToolboxManager.vue

@@ -28,6 +28,7 @@
           :tooltip="group.action.title"
           :icon="group.action.icon"
           :active="group.action.active"
+          :background="group.action.background"
           @click.stop="group.action.callback($event)"
           v-bind="{...$attrs}"
           large