@vcmap/ui 5.0.0-rc.14 → 5.0.0-rc.15

package/src/legend/styleLegendItem.vue

@@ -92,6 +92,16 @@
 <script>
 
   import { getStringColor } from '@vcmap/core';
+  import {
+    VFlex,
+    VImg,
+    VLayout,
+    VList,
+    VListItem,
+    VListItemContent,
+    VListItemIcon,
+    VListItemTitle,
+  } from 'vuetify/lib';
   import { StyleRowType, getImageSrcFromShape } from './legendHelper.js';
 
   /**
@@ -100,7 +110,16 @@
    */
   export default {
     name: 'StyleLegendItem',
-    components: { },
+    components: {
+      VList,
+      VLayout,
+      VFlex,
+      VListItem,
+      VListItemIcon,
+      VImg,
+      VListItemContent,
+      VListItemTitle,
+    },
     props: {
       item: {
         type: Object,

package/src/legend/vcsLegend.vue

@@ -50,17 +50,38 @@
 
 <script>
 
+  import {
+    VCard,
+    VExpansionPanels,
+    VExpansionPanel,
+    VExpansionPanelHeader,
+    VExpansionPanelContent,
+    VIcon,
+    VList,
+    VImg,
+  } from 'vuetify/lib';
   import { LegendType } from './legendHelper.js';
   import StyleLegendItem from './styleLegendItem.vue';
   import VcsTreeviewLeaf from '../components/lists/VcsTreeviewLeaf.vue';
 
   /**
    * @description A component rendering configured legend information for active layers.
-   * @vue-prop {import("vue").Reactive<{string,LegendEntry}>} entries - legend entries to be displayed
+   * @vue-prop {import("vue").Ref<Array<LegendEntry>>} entries - legend entries to be displayed
    */
   export default {
     name: 'VcsLegend',
-    components: { VcsTreeviewLeaf, StyleLegendItem },
+    components: {
+      VcsTreeviewLeaf,
+      StyleLegendItem,
+      VCard,
+      VExpansionPanels,
+      VExpansionPanel,
+      VExpansionPanelHeader,
+      VExpansionPanelContent,
+      VIcon,
+      VList,
+      VImg,
+    },
     props: {
       entries: {
         type: Object,
@@ -85,8 +106,13 @@
   };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .v-list-item--dense {
   height: 32px;
 }
+::v-deep {
+  .treeview-label {
+    max-width: 189px;
+  }
+}
 </style>

package/src/manager/toolbox/GroupToolboxComponent.vue

@@ -62,6 +62,12 @@
 </style>
 <script>
   import { computed, ref } from 'vue';
+  import {
+    VMenu,
+    VIcon,
+    VToolbar,
+    VToolbarItems,
+  } from 'vuetify/lib';
   import VcsButton from '../../components/buttons/VcsButton.vue';
   import { getComponentsByOrder } from './toolboxManager.js';
 
@@ -78,7 +84,13 @@
    */
   export default {
     name: 'ToolboxActionGroup',
-    components: { VcsButton },
+    components: {
+      VcsButton,
+      VMenu,
+      VIcon,
+      VToolbar,
+      VToolbarItems,
+    },
     props: {
       group: {
         type: Object,

package/src/manager/toolbox/SelectToolboxComponent.vue

@@ -88,6 +88,12 @@
 </style>
 <script>
   import { ref, computed } from 'vue';
+  import {
+    VMenu,
+    VIcon,
+    VToolbar,
+    VToolbarItems,
+  } from 'vuetify/lib';
   import VcsButton from '../../components/buttons/VcsButton.vue';
 
   /**
@@ -98,7 +104,13 @@
    */
   export default {
     name: 'ToolboxActionSelect',
-    components: { VcsButton },
+    components: {
+      VcsButton,
+      VMenu,
+      VIcon,
+      VToolbar,
+      VToolbarItems,
+    },
     props: {
       group: {
         type: Object,

package/src/manager/toolbox/ToolboxManager.vue

@@ -72,6 +72,7 @@
 <script>
   import { inject, ref, computed, watch, onUnmounted } from 'vue';
   import { ButtonLocation, vcsAppSymbol } from '@vcmap/ui';
+  import { VToolbar, VToolbarItems } from 'vuetify/lib';
   import { getComponentsByOrder, ToolboxType } from './toolboxManager.js';
   import ToolboxActionSelect from './SelectToolboxComponent.vue';
   import ToolboxActionGroup from './GroupToolboxComponent.vue';
@@ -104,6 +105,8 @@
       ToolboxActionSelect,
       ToolboxActionGroup,
       VcsButton,
+      VToolbar,
+      VToolbarItems,
     },
     setup() {
       const app = inject('vcsApp');

package/src/manager/window/WindowComponent.vue

@@ -44,9 +44,15 @@
   } from 'vue';
   import { fromEvent } from 'rxjs';
   import { switchMap, take, map, tap } from 'rxjs/operators';
+  import { VDivider, VSheet } from 'vuetify/lib';
   import { WindowSlot } from './windowManager.js';
 
   export default {
+    name: 'WindowComponent',
+    components: {
+      VSheet,
+      VDivider,
+    },
     props: {
       windowState: {
         type: Object,

package/src/manager/window/WindowComponentHeader.vue

@@ -25,10 +25,15 @@
 </style>
 
 <script>
+  import { VIcon } from 'vuetify/lib';
   import VcsButton from '../../components/buttons/VcsButton.vue';
 
   export default {
-    components: { VcsButton },
+    name: 'WindowComponentHeader',
+    components: {
+      VcsButton,
+      VIcon,
+    },
     props: {
       windowState: {
         type: Object,

package/src/navigation/mapNavigation.vue

@@ -37,8 +37,8 @@
 
 <script>
   import { computed, inject, ref, reactive, onUnmounted } from 'vue';
-  import { ObliqueMap, CesiumMap, OpenlayersMap } from '@vcmap/core';
-  import { unByKey } from 'ol/Observable.js';
+  import { ObliqueMap, CesiumMap } from '@vcmap/core';
+  import { VContainer, VRow } from 'vuetify/lib';
   import { createOverviewMapAction } from '../actions/actionHelper.js';
   import { getWindowComponentOptions } from './overviewMap.js';
   import VcsCompass from './vcsCompass.vue';
@@ -65,32 +65,6 @@
     return OrientationToolsViewMode.TWO_D;
   }
 
-  /**
-   * @param {VcsMap} map
-   * @param {Ref<number>} headingRef
-   * @param {Ref<number>} tiltRef
-   * @returns {function():void}
-   */
-  function mapPostRender(map, headingRef, tiltRef) {
-    const handler = () => {
-      const vp = map.getViewpointSync();
-      if (vp) {
-        headingRef.value = vp.heading;
-        tiltRef.value = vp.pitch;
-      }
-    };
-
-    if (map instanceof CesiumMap) {
-      return map.getScene().postRender.addEventListener(handler);
-    } else if (map instanceof ObliqueMap || map instanceof OpenlayersMap) {
-      const key = map.olMap.on('postrender', handler);
-      return () => {
-        unByKey(key);
-      };
-    }
-    return () => {};
-  }
-
   /**
    * @param {VcsMap} map
    * @param {boolean} [out=false]
@@ -117,6 +91,8 @@
       TiltSlider,
       VcsZoomButton,
       VcsCompass,
+      VContainer,
+      VRow,
     },
     setup() {
       /** @type {VcsUiApp} */
@@ -125,17 +101,19 @@
       const headingRef = ref(0);
       const tiltRef = ref(0);
 
-      let postRenderHandler = () => {};
-
-      const setActiveMap = (map) => {
+      const handleRenderEvent = ({ map }) => {
         viewMode.value = getViewModeForMap(map);
-        postRenderHandler();
-        postRenderHandler = mapPostRender(map, headingRef, tiltRef);
+        const vp = map.getViewpointSync();
+        if (vp) {
+          headingRef.value = vp.heading;
+          tiltRef.value = vp.pitch;
+        }
       };
 
-      app.maps.mapActivated.addEventListener(setActiveMap);
-      setActiveMap(app.maps.activeMap);
-
+      const postRenderHandler = app.maps.postRender.addEventListener(handleRenderEvent);
+      if (app.maps.activeMap) {
+        handleRenderEvent({ map: app.maps.activeMap });
+      }
       const heading = computed({
         get() { return headingRef.value; },
         async set(headingValue) {
@@ -169,6 +147,7 @@
         if (destroy) {
           destroy();
         }
+        postRenderHandler();
       });
 
       return {

package/src/navigation/orientationToolsButton.vue

@@ -23,6 +23,7 @@
 }
 </style>
 <script>
+  import { VCard, VIcon } from 'vuetify/lib';
   import VcsTooltip from '../components/notification/VcsTooltip.vue';
 
   /**
@@ -33,7 +34,11 @@
    */
   export default {
     name: 'OrientationToolsButton',
-    components: { VcsTooltip },
+    components: {
+      VcsTooltip,
+      VCard,
+      VIcon,
+    },
     props: {
       icon: {
         type: String,

package/src/navigation/overviewMap.js

@@ -1,6 +1,5 @@
 import {
   OpenlayersMap,
-  CesiumMap,
   ObliqueMap,
   VectorLayer,
   VectorStyleItem,
@@ -308,12 +307,10 @@ class OverviewMap {
     }
     this._active = true;
     const { activeMap } = this._app.maps;
-    if (activeMap instanceof CesiumMap) {
-      await this._initializeForCesium(activeMap);
-    } else if (activeMap instanceof OpenlayersMap) {
-      await this._initializeForOpenlayers(activeMap);
-    } else if (activeMap instanceof ObliqueMap) {
+    if (activeMap instanceof ObliqueMap) {
       await this._initializeForOblique(activeMap);
+    } else {
+      await this._initializePostRenderHandler(activeMap);
     }
   }
 
@@ -343,45 +340,19 @@ class OverviewMap {
   }
 
   /**
-   * @param {import("@vcmap/core").CesiumMap} cesiumMap
+   * @param {import("@vcmap/core").VcsMap} map
    * @returns {Promise<void>}
    * @private
    */
-  async _initializeForCesium(cesiumMap) {
+  async _initializePostRenderHandler(map) {
     if (!this._cameraIconLayer) {
       this._setupCameraIconLayer();
     }
-    if (cesiumMap.initialized) {
-      const cesiumViewer = cesiumMap.getCesiumWidget();
-      const cesiumScene = cesiumViewer.scene;
-      const navRemover = this._addNavigationListener(cesiumMap);
-      const prRemover = cesiumScene.postRender.addEventListener(this._addCameraFeature, this);
-      const cleanupTasks = () => {
-        prRemover();
-        navRemover();
-        this._cameraIconLayer.deactivate();
-      };
-      this._listeners.push(cleanupTasks);
-      await this._cameraIconLayer.activate();
-    }
-  }
-
-  /**
-   * @param {import("@vcmap/core").OpenlayersMap} map
-   * @returns {Promise<void>}
-   * @private
-   */
-  async _initializeForOpenlayers(map) {
-    if (!this._cameraIconLayer) {
-      this._setupCameraIconLayer();
-    }
-    const { olMap } = map;
-    const navListener = this._addNavigationListener(map);
-    const prUnKey = olMap.on('postrender', this._addCameraFeature.bind(this));
-
+    const navRemover = this._addNavigationListener(map);
+    const prRemover = map.postRender.addEventListener(this._addCameraFeature.bind(this));
     const cleanupTasks = () => {
-      unByKey(prUnKey);
-      navListener();
+      prRemover();
+      navRemover();
       this._cameraIconLayer.deactivate();
     };
     this._listeners.push(cleanupTasks);
@@ -543,7 +514,7 @@ class OverviewMap {
    * @private
    */
   _addCameraFeature() {
-    const viewpoint = this._app.maps.activeMap.getViewpointSync();
+    const viewpoint = this._app.maps.activeMap?.getViewpointSync();
     if (!viewpoint || !viewpoint.isValid() || viewpoint.equals(this._cachedViewpoint)) {
       return;
     }

package/src/navigation/tiltSlider.vue

@@ -47,6 +47,7 @@
 </style>
 <script>
   import { clamp } from 'ol/math.js';
+  import { VCard, VSlider } from 'vuetify/lib';
   import VcsTooltip from '../components/notification/VcsTooltip.vue';
 
   /**
@@ -58,6 +59,8 @@
     name: 'TiltSlider',
     components: {
       VcsTooltip,
+      VCard,
+      VSlider,
     },
     props: {
       value: {

package/src/navigation/vcsCompass.vue

@@ -33,6 +33,7 @@
   import { fromEvent, merge, of, Subject } from 'rxjs';
   import { takeUntil, tap } from 'rxjs/operators';
 
+  import { VSheet } from 'vuetify/lib';
   import MapNavCompass from './mapNavCompass.vue';
 
   /**
@@ -45,6 +46,7 @@
     name: 'VcsCompass',
     components: {
       MapNavCompass,
+      VSheet,
     },
     props: {
       viewMode: {

package/src/search/resultItem.vue

@@ -0,0 +1,89 @@
+<template>
+  <div
+    class="ma-1 d-flex flex-row align-center"
+    v-if="item"
+  >
+    <v-list-item-icon v-if="item.icon" class="px-1">
+      <v-icon>
+        {{ item.icon }}
+      </v-icon>
+    </v-list-item-icon>
+    <div
+      class="px-2 d-flex align-center"
+      :title="$t('search.select')"
+    >
+      <span v-html="marked" />
+    </div>
+    <VcsActionButtonList
+      v-if="hasActions"
+      :actions="item.actions"
+      :block-overflow="true"
+      :overflow-count="2"
+      small
+      right
+    />
+  </div>
+</template>
+
+<script>
+  import { computed } from 'vue';
+  import { VIcon, VListItemIcon } from 'vuetify/lib';
+  import VcsActionButtonList from '../components/buttons/VcsActionButtonList.vue';
+
+  /**
+   * @param {string} text
+   * @param {string} query
+   * @returns {string}
+   */
+  function markText(text, query) {
+    let replacement = text;
+    if (query) {
+      const partials = query.split(/[.,\s]/)
+        .filter(partial => partial.trim());
+      partials.forEach((partial) => {
+        replacement = replacement
+          .replaceAll(new RegExp(`(^|[^>])(${partial})`, 'ig'), '<span class="primary--text">$2</span>');
+      });
+    }
+    return replacement;
+  }
+
+  /**
+   * ResultItem with optional icon or image, title and optional actions
+   * @vue-prop {string} query - The query string to mark results
+   * @vue-prop {ResultItem} resultItem
+   * @vue-computed {boolean} hasActions - Whether result item has actions or not
+   * @vue-computed {string} marked - The result item's title with highlighted query string
+   */
+  export default {
+    name: 'ResultItem',
+    components: {
+      VcsActionButtonList,
+      VListItemIcon,
+      VIcon,
+    },
+    props: {
+      query: {
+        type: String,
+        default: '',
+      },
+      item: {
+        type: Object,
+        required: true,
+      },
+    },
+    setup(props) {
+      const hasActions = computed(() => props.item?.actions?.length > 0);
+      const marked = computed(() => markText(props.item.title, props.query));
+
+      return {
+        hasActions,
+        marked,
+      };
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/src/search/resultsComponent.vue

@@ -0,0 +1,98 @@
+<template>
+  <v-list dense class="ma-0 overflow-y-auto vcs-search-results">
+    <v-list-item-group
+      v-model="highlighted"
+    >
+      <v-list-item
+        v-for="(item, index) in results"
+        :key="index"
+        color="secondary"
+        class="px-0"
+      >
+        <v-list-item-content>
+          <ResultItem
+            :item="item"
+            :query="query"
+            class="cursor-pointer"
+          />
+          <v-divider
+            v-if="index < results.length - 1"
+            :key="index"
+          />
+        </v-list-item-content>
+      </v-list-item>
+    </v-list-item-group>
+  </v-list>
+</template>
+
+<script>
+  import { inject, onUnmounted, ref, computed } from 'vue';
+  import { VDivider, VList, VListItem, VListItemContent, VListItemGroup } from 'vuetify/lib';
+  import ResultItem from './resultItem.vue';
+
+  /**
+   * ResultsComponent listing all available result items in a scrollable list
+   * @vue-prop {string} query - The query string forwarded to mark results within resultItem component.
+   * @vue-prop {Array<ResultItem>} results - Array of results.
+   * @vue-computed {import("vue").Ref<string>} highlighted - The highlighted result item. Updates also on feature select.
+   */
+  export default {
+    name: 'ResultsComponent',
+    components: {
+      ResultItem,
+      VList,
+      VListItemGroup,
+      VListItem,
+      VListItemContent,
+      VDivider,
+    },
+    props: {
+      query: {
+        type: String,
+        default: '',
+      },
+      results: {
+        type: Array,
+        required: true,
+      },
+    },
+    setup(props) {
+      const highlightedRef = ref(-1);
+      /** @type {VcsUiApp} */
+      const app = inject('vcsApp');
+      const selectedListener = app.featureInfo.featureChanged.addEventListener((feature) => {
+        if (highlightedRef.value >= 0) {
+          if (feature && props.results[highlightedRef.value].feature === feature) {
+            return;
+          }
+          highlightedRef.value = -1;
+        } else if (feature) {
+          highlightedRef.value = props.results.findIndex(r => r.feature === feature);
+        }
+      });
+
+      onUnmounted(() => {
+        selectedListener();
+      });
+
+      return {
+        highlighted: computed({
+          get() { return highlightedRef.value; },
+          set(value) {
+            highlightedRef.value = value;
+            if (value >= 0) {
+              const item = props.results[value];
+              item.clicked();
+            }
+          },
+        }),
+      };
+    },
+  };
+</script>
+
+<style scoped>
+  .vcs-search-results {
+    max-height: 400px;
+  }
+</style>