@vcmap/ui 5.0.0-rc.16 → 5.0.0-rc.18

package/src/components/lists/VcsList.vue

@@ -388,15 +388,17 @@
             .forEach(i => i.selectionChanged(false));
           selected.value = [];
           firstSelected = null;
+          emit('input', selected.value);
         },
         selectAll() {
           const currentSelection = [...selected.value];
           selected.value = this.renderingItems.slice(0);
           selected.value.forEach((item) => {
-            if (item.selectionChanged && currentSelection.includes(item)) {
+            if (item.selectionChanged && !currentSelection.includes(item)) {
               item.selectionChanged(true);
             }
           });
+          emit('input', selected.value);
         },
       };
     },
@@ -409,7 +411,7 @@
       .v-list-item {
         padding: 4px 8px 4px 16px;
         display: grid;
-        grid-template-columns: auto 1fr;
+        grid-template-columns: auto auto;
         &:after{
           display: none;
         }

package/src/contentTree/contentTreeCollection.js

@@ -198,6 +198,15 @@ class ContentTreeCollection extends IndexedCollection {
     this._subTreeListeners = subTrees.map(subTree => this._createSubtreeActionButton(subTree));
   }
 
+  /**
+   * Returns all managed subtrees. Entries are not persisted and will change, if the trees get recalculated.
+   * @type {import("vue").Ref<Map<string, TreeViewItem>>}
+   * @readonly
+   */
+  get subTreeViewItems() {
+    return this._subTreeViewItems;
+  }
+
   /**
    * All ids of the currently managed subtrees. Ids are not persisted and will change if
    * the trees get recalculated. The first ID is always the default tree. Other ids are subtree ids.

package/src/contentTree/layerContentTreeItem.js

@@ -127,7 +127,7 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
             layerName: this._layerName,
           }),
         },
-        this._app.windowManager,
+        this._app,
         vcsAppSymbol,
       );
       this.addAction(action, 4);
@@ -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>
@@ -150,6 +150,9 @@
 </script>
 
 <style lang="scss">
+  .balloon {
+    z-index: 0 !important;
+  }
   .balloon hr:first-child {
     display: none;
   }

package/src/featureInfo/balloonFeatureInfoView.js

@@ -4,9 +4,8 @@ import { Cartographic, Entity, Math as CesiumMath } from '@vcmap/cesium';
 import { Projection } from '@vcmap/core';
 import { check } from '@vcsuite/check';
 import AbstractFeatureInfoView from './abstractFeatureInfoView.js';
-import { getWindowPositionOptions, WindowAlignment, WindowSlot } from '../manager/window/windowManager.js';
+import { WindowSlot } from '../manager/window/windowManager.js';
 import BalloonComponent from './BalloonComponent.vue';
-import { balloonOffset } from './balloonHelper.js';
 
 /**
  * derive value from attributes
@@ -124,12 +123,7 @@ class BalloonFeatureInfoView extends AbstractFeatureInfoView {
     options.state.hideHeader = true;
     options.state.classes = ['balloon'];
     options.slot = WindowSlot.DETACHED;
-    options.position = getWindowPositionOptions(
-      (featureInfo.windowPosition?.[0] ?? 0) - balloonOffset.x, // if we do not have a windowPosition, let the next render handle it
-      (featureInfo.windowPosition?.[1] ?? 0) - balloonOffset.y,
-      null,
-      WindowAlignment.BOTTOM_LEFT,
-    );
+    // windowPosition is handled by next render
     return options;
   }
 

package/src/featureInfo/balloonHelper.js

@@ -4,7 +4,7 @@ import { unByKey } from 'ol/Observable.js';
 import {
   getWindowPositionOptionsFromMapEvent,
   WindowAlignment,
-} from '../manager/window/windowManager.js';
+} from '../manager/window/windowHelper.js';
 
 /**
  * balloon offset from location or click position in pixel
@@ -63,8 +63,9 @@ export async function getBalloonPosition(app, position) {
  * @param {WindowManager} windowManager
  * @param {string} id - windowId of balloon
  * @param {import("@vcmap/cesium").Cartesian2|undefined} windowPosition
+ * @param {HTMLElement} target - the map's target { @link @import("@vcmap/core").MapCollection }
  */
-export function setBalloonPosition(windowManager, id, windowPosition) {
+export function setBalloonPosition(windowManager, id, windowPosition, target) {
   if (!windowPosition) {
     return;
   }
@@ -72,6 +73,7 @@ export function setBalloonPosition(windowManager, id, windowPosition) {
     id,
     getWindowPositionOptionsFromMapEvent(
       new Cartesian2(windowPosition.x - balloonOffset.x, windowPosition.y - balloonOffset.y),
+      target,
       WindowAlignment.BOTTOM_LEFT,
     ),
   );
@@ -106,10 +108,20 @@ export async function setupBalloonPositionListener(vcsApp, windowId, clickedPosi
       const wgs84Position = Projection.mercatorToWgs84(position);
       const cartesian = Cartographic.toCartesian(Cartographic.fromDegrees(...wgs84Position));
       listeners.push(map.getScene().postRender.addEventListener((scene) => {
-        setBalloonPosition(app.windowManager, windowId, getBalloonPositionCesium(scene, cartesian));
+        setBalloonPosition(
+          app.windowManager,
+          windowId,
+          getBalloonPositionCesium(scene, cartesian),
+          app.maps.target,
+        );
       }));
     } else if (map instanceof OpenlayersMap) {
-      const handler = () => setBalloonPosition(app.windowManager, windowId, getBalloonPositionOL(map.olMap, position));
+      const handler = () => setBalloonPosition(
+        app.windowManager,
+        windowId,
+        getBalloonPositionOL(map.olMap, position),
+        app.maps.target,
+      );
       const key = map.olMap.on(
         'postrender',
         handler,
@@ -121,7 +133,12 @@ export async function setupBalloonPositionListener(vcsApp, windowId, clickedPosi
         position,
       );
       listeners.push(map.imageChanged.addEventListener(setup.bind(null, app, windowId, position)));
-      const handler = () => setBalloonPosition(app.windowManager, windowId, getBalloonPositionOL(map.olMap, coords));
+      const handler = () => setBalloonPosition(
+        app.windowManager,
+        windowId,
+        getBalloonPositionOL(map.olMap, coords),
+        app.maps.target,
+      );
       const key = map.olMap.on(
         'postrender',
         handler,

package/src/featureInfo/featureInfo.js

@@ -25,7 +25,6 @@ import {
 } from '@vcmap/cesium';
 import { Feature } from 'ol';
 import { check, checkMaybe } from '@vcsuite/check';
-import { v4 as uuidv4 } from 'uuid';
 
 import { vcsAppSymbol } from '../pluginHelper.js';
 import FeatureInfoInteraction from './featureInfoInteraction.js';
@@ -402,7 +401,7 @@ class FeatureInfo {
         });
         this._clearHighlightingCb = () => layer.featureVisibility.unHighlight([featureId]);
       }
-      this._windowId = uuidv4(); // we need to create a uuid, otherwise the window manager gets confused if we recreate a window in the same thread with the same id
+      this._windowId = usedFeatureInfoView.className; // use className for a type based position caching
       this._app.windowManager.add(
         {
           id: this._windowId,

package/src/i18n/de.js

@@ -8,6 +8,9 @@ const messages = {
     menu: {
       tooltip: 'Menü',
     },
+    share: {
+      tooltip: 'Den aktuellen Kartenausschnitt teilen.',
+    },
   },
   content: {
     title: 'Inhalte',
@@ -30,7 +33,8 @@ const messages = {
       title: 'Öffne Stil Auswahl',
     },
     layerExtentAction: {
-      title: 'Jump to layer extent',
+      name: 'Ebenenausdehnung',
+      title: 'Auf Ebenenausdehnung zoomen',
     },
   },
   navigation: {
@@ -38,12 +42,17 @@ const messages = {
     obliqueRightTooltip: 'Schrägluftbild nach rechts drehen',
     zoomInTooltip: 'Hineinzoomen',
     zoomOutTooltip: 'Herauszoomen',
-    pitchTooltip: 'Kamera pitch: {0}°',
+    pitchTooltip: 'Kameraneigung: {0}°',
     overviewMapTooltip: 'Übersichtskarte',
   },
-  components: {
+  categoryManager: {
     title: 'Komponenten',
     tooltip: 'Komponenten',
+    more: 'Weitere anzeigen...',
+    empty: 'Es gibt noch keine Einträge.',
+  },
+  components: {
+    pin: 'Fenster andocken.',
     close: 'Fenster schließen.',
     vcsFormSection: {
       help: 'Hilfe anzeigen.',

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',
@@ -30,6 +33,7 @@ const messages = {
       title: 'Open Style selector',
     },
     layerExtentAction: {
+      name: 'Layer extent',
       title: 'Jump to layer extent',
     },
   },
@@ -41,9 +45,14 @@ const messages = {
     pitchTooltip: 'Camera pitch: {0}°',
     overviewMapTooltip: 'Overview Map',
   },
-  components: {
+  categoryManager: {
     title: 'Components',
     tooltip: 'Components',
+    more: 'Show more...',
+    empty: 'There are no entries yet.',
+  },
+  components: {
+    pin: 'Pin window.',
     close: 'Close window.',
     vcsFormSection: {
       help: 'Show help.',

package/src/legend/legendHelper.js

@@ -1,5 +1,5 @@
 import { getShapeFromOptions } from '@vcmap/core';
-import { ref } from 'vue';
+import { shallowRef } from 'vue';
 
 /**
  * @enum {string}
@@ -142,7 +142,7 @@ export function getLegendEntries(app) {
   /**
    * @type {import("vue").Ref<Array<LegendEntry>>}>}
    */
-  const entries = ref([]);
+  const entries = shallowRef([]);
   /**
    * @type {Object<string,function():void>}
    */
@@ -153,10 +153,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 +174,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
+        entries.value = [...entries.value, legendEntry];
       }
       if (layer.styleChanged) {
         styleChangedListener[layer.name] = layer.styleChanged.addEventListener(() => syncLayerLegendEntries(layer));

package/src/legend/vcsLegend.vue

@@ -27,7 +27,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
@@ -58,7 +64,6 @@
     VExpansionPanelContent,
     VIcon,
     VList,
-    VImg,
   } from 'vuetify/lib';
   import { LegendType } from './legendHelper.js';
   import StyleLegendItem from './styleLegendItem.vue';
@@ -80,7 +85,6 @@
       VExpansionPanelContent,
       VIcon,
       VList,
-      VImg,
     },
     props: {
       entries: {
@@ -115,4 +119,9 @@
     max-width: 189px;
   }
 }
+.legend-image {
+  max-width: 287px;
+  height: auto;
+  width: auto;
+}
 </style>

package/src/manager/categoryManager/CategoryComponent.vue

@@ -0,0 +1,115 @@
+<template>
+  <v-container>
+    <v-row @click="open = !open" class="px-2 py-1 cursor-pointer">
+      <span>
+        <v-icon v-if="open">mdi-chevron-up</v-icon>
+        <v-icon v-else>mdi-chevron-down</v-icon>
+      </span>
+      <span class="flex-grow-1 flex-shrink-1">{{ $t(category.title) }}</span>
+      <vcs-action-button-list
+        v-if="category.actions?.length > 0"
+        :actions="category.actions"
+        small
+      />
+    </v-row>
+    <template v-if="open">
+      <v-row>
+        <v-col class="pa-0">
+          <vcs-list
+            :items="category.items.slice(0, 10)"
+            :selectable="category.selectable"
+            :single-select="category.singleSelect"
+            v-model="selection"
+            :show-title="false"
+          />
+        </v-col>
+      </v-row>
+      <v-row v-if="category.items.length > 10">
+        <v-col class="pa-0">
+          <VcsButton @click="openCategoryItemWindow" class="pa-2" small>
+            {{ $t('categoryManager.more') }}
+          </VcsButton>
+        </v-col>
+      </v-row>
+      <v-row v-else-if="category.items.length === 0">
+        <v-col class="pa-2">
+          {{ $t('categoryManager.empty') }}
+        </v-col>
+      </v-row>
+    </template>
+  </v-container>
+</template>
+
+<script>
+  import { computed, inject, ref } from 'vue';
+  import { VIcon, VContainer, VRow, VCol } from 'vuetify/lib';
+  import VcsList from '../../components/lists/VcsList.vue';
+  import VcsActionButtonList from '../../components/buttons/VcsActionButtonList.vue';
+  import VcsButton from '../../components/buttons/VcsButton.vue';
+  import { vcsAppSymbol } from '../../pluginHelper.js';
+  import CategoryComponentList from './CategoryComponentList.vue';
+  import { WindowSlot } from '../window/windowManager.js';
+
+  export default {
+    name: 'CategoryComponent',
+    components: {
+      VcsActionButtonList,
+      VcsList,
+      VContainer,
+      VRow,
+      VcsButton,
+      VCol,
+      VIcon,
+    },
+    props: {
+      /** @type {ManagedCategory} */
+      category: {
+        type: Object,
+        required: true,
+      },
+    },
+    setup({ category }) {
+      /** @type {VcsUiApp} */
+      const app = inject('vcsApp');
+      const windowId = `${category.id}-category-list`;
+      const open = ref(false);
+
+      const selection = computed({
+        get() { return category.selection; },
+        set(value) {
+          // eslint-disable-next-line vue/no-mutating-props
+          category.selection = value;
+        },
+      });
+
+      return {
+        selection,
+        open,
+        openCategoryItemWindow() {
+          if (app.windowManager.has(windowId)) {
+            setTimeout(() => {
+              app.windowManager.bringWindowToTop(windowId);
+            }, 0);
+          } else {
+            app.windowManager.add({
+              id: windowId,
+              component: CategoryComponentList,
+              props: {
+                category,
+                windowId,
+              },
+              provides: {
+                selection,
+              },
+              slot: WindowSlot.DYNAMIC_LEFT,
+            }, vcsAppSymbol);
+          }
+        },
+      };
+    },
+  };
+</script>
+
+<style scoped>
+
+</style>

package/src/manager/categoryManager/CategoryComponentList.vue

@@ -0,0 +1,57 @@
+<template>
+  <vcs-list
+    :items="category.items"
+    :selectable="category.selectable"
+    :single-select="category.singleSelect"
+    v-model="selection"
+    :title="category.title"
+  />
+</template>
+
+<script>
+  import { computed, inject, watch } from 'vue';
+  import VcsList from '../../components/lists/VcsList.vue';
+
+  export default {
+    name: 'CategoryComponenList',
+    components: {
+      VcsList,
+    },
+    props: {
+      category: {
+        type: Object,
+        required: true,
+      },
+      windowId: {
+        type: String,
+        required: true,
+      },
+    },
+    setup({ category, windowId }) {
+      /** @type {VcsUiApp} */
+      const app = inject('vcsApp');
+
+      const selection = computed({
+        get() { return category.selection; },
+        set(value) {
+          // eslint-disable-next-line vue/no-mutating-props
+          category.selection = value;
+        },
+      });
+
+      watch(app.categoryManager.componentIds, () => {
+        if (!app.categoryManager.get(category.id)) {
+          app.windowManager.remove(windowId);
+        }
+      });
+
+      return {
+        selection,
+      };
+    },
+  };
+</script>
+
+<style scoped>
+
+</style>

package/src/manager/categoryManager/CategoryManager.vue

@@ -0,0 +1,35 @@
+<template>
+  <div
+    v-if="categories.length > 0"
+  >
+    <category-component
+      v-for="category in categories"
+      :category="category"
+      :key="category.categoryName"
+    />
+  </div>
+</template>
+
+<script>
+  import { inject, ref, computed } from 'vue';
+  import CategoryComponent from './CategoryComponent.vue';
+
+  /**
+   * @description
+   * uses a VcsList and renders 'a components Window' based on the "categoryManager"
+   * Uses the provided 'vcsApp'
+   */
+  export default {
+    name: 'CategoryManager',
+    components: { CategoryComponent },
+    setup() {
+      const app = inject('vcsApp');
+      const categoryIds = ref(app.categoryManager.componentIds);
+      const categories = computed(() => categoryIds.value.map(id => app.categoryManager.get(id)));
+
+      return {
+        categories,
+      };
+    },
+  };
+</script>