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

package/src/manager/window/windowManager.js

@@ -78,6 +78,7 @@ export const WindowPositions = {
  * @property {WindowState} [state]
  * @property {WindowSlot} [slot] If WindowSlot is not detached the position will be ignored
  * @property {Object} [props]
+ * @property {Object} [provides]
  */
 
 /**
@@ -87,6 +88,8 @@ export const WindowPositions = {
  * @property {boolean} [hideHeader] be used to not show the header.
  * @property {string} [headerTitle]
  * @property {string} [headerIcon]
+ * @property {Array<VcsAction>} [headerActions]
+ * @property {number} [headerActionsOverflowCount]
  * @property {Object<string, string>} styles[styles] Can be used to add additional styles to the root WindowComponent. Use Vue Style Bindings Object Syntax https://vuejs.org/v2/guide/class-and-style.html
  * @property {Array<string>|Object<string,string>} [classes] Can be used to add additional classes to the root WindowComponent. Use Vue Class Bindings Syntax https://vuejs.org/v2/guide/class-and-style.html
  */
@@ -100,6 +103,7 @@ export const WindowPositions = {
  * @property {WindowState} state
  * @property {Ref<UnwrapRef<WindowSlot>>} slot
  * @property {Object} props
+ * @property {Object} provides
  */
 
 /**
@@ -417,7 +421,7 @@ class WindowManager {
   /**
    * adds a windowComponent to the WindowManager and renders the Window at the provided position/slot.
    * The reactive WindowState Object can be used to watch Changes on position/WindowSlot.
-   * The WindowState Object can also be used to change hideHeader, headerTitle, headerIcon, styles and classes
+   * The WindowState Object can also be used to change hideHeader, headerTitle, headerIcon, headerActions, styles and classes
    * @param {WindowComponentOptions|WindowComponent} windowComponentOptions
    * @param {string|symbol} owner pluginName or vcsAppSymbol
    * @throws {Error} if a windowComponent with the same ID has already been added
@@ -450,11 +454,14 @@ class WindowManager {
       hideHeader: !!windowComponentOptions?.state?.hideHeader,
       headerTitle: windowComponentOptions?.state?.headerTitle,
       headerIcon: windowComponentOptions?.state?.headerIcon,
+      headerActions: windowComponentOptions?.state?.headerActions,
+      headerActionsOverflow: windowComponentOptions?.state?.headerActionsOverflow,
       classes,
       styles,
     });
 
     const props = windowComponentOptions.props || {};
+    const provides = windowComponentOptions.provides || {};
 
     const position = reactive(windowPosition);
     /**
@@ -482,6 +489,9 @@ class WindowManager {
       get props() {
         return props;
       },
+      get provides() {
+        return provides;
+      },
     };
     this._removeWindowAtSlot(slot);
     this._windowComponents.set(id, windowComponent);

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,
@@ -206,7 +205,7 @@ class OverviewMap {
           clone.activate();
           const idx = this._map.layerCollection.indexOf(clone);
           if (idx < 0) {
-            this._map.layerCollection.add(clone);
+            this._map.layerCollection.add(clone, 0);
           } else {
             this._map.layerCollection.remove(clone);
             this._map.layerCollection.add(clone, idx);
@@ -299,6 +298,7 @@ class OverviewMap {
       this._setupMapInteraction();
     }
     await this._map.activate();
+    this.map.setTarget('overview-map-container');
     if (!this._active) {
       this._mapActivatedListener = this._app.maps.mapActivated.addEventListener(() => {
         this._clearListeners();
@@ -308,12 +308,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);
     }
   }
 
@@ -326,7 +324,6 @@ class OverviewMap {
       this._app.windowManager.add(getWindowComponentOptions(), vcsAppSymbol);
     }
     await this._activate();
-    this.map.setTarget('overview-map-container');
   }
 
   /**
@@ -343,45 +340,20 @@ 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();
+      this._syncCameraViewAndFeature();
     }
-    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._syncCameraViewAndFeature.bind(this));
     const cleanupTasks = () => {
-      unByKey(prUnKey);
-      navListener();
+      prRemover();
+      navRemover();
       this._cameraIconLayer.deactivate();
     };
     this._listeners.push(cleanupTasks);
@@ -542,8 +514,8 @@ class OverviewMap {
    * Adds and maintains the view and camera feature
    * @private
    */
-  _addCameraFeature() {
-    const viewpoint = this._app.maps.activeMap.getViewpointSync();
+  _syncCameraViewAndFeature() {
+    const viewpoint = this._app.maps.activeMap?.getViewpointSync();
     if (!viewpoint || !viewpoint.isValid() || viewpoint.equals(this._cachedViewpoint)) {
       return;
     }
@@ -554,8 +526,6 @@ class OverviewMap {
     let { distance } = viewpoint;
     if (position[2] && !(distance && distance < position[2] * 4)) {
       distance = position[2] * 4;
-    } else if (position[2] == null) {
-      position[2] = distance;
     }
 
     distance = distance > this.minimumHeight ? distance : this.minimumHeight;
@@ -580,9 +550,11 @@ class OverviewMap {
     this.cameraIconStyle.image.setRotation(rotationRadians);
 
     viewpoint.heading = 0;
-    viewpoint.cameraPosition = position;
-    viewpoint.groundPosition = null;
-    viewpoint.distance = distance * 4;
+    if (viewpoint.cameraPosition) {
+      viewpoint.cameraPosition = position;
+      viewpoint.groundPosition = null;
+      viewpoint.distance = distance * 4;
+    }
     this._map.gotoViewpoint(viewpoint);
   }
 

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/notifier/notifier.js

@@ -0,0 +1,121 @@
+import { ref, shallowRef } from 'vue';
+import { v4 as uuidv4 } from 'uuid';
+
+/**
+ * @typedef {Object} NotificationOptions
+ * @property {string} message
+ * @property {NotificationType} type
+ * @property {string} [title]
+ * @property {number} [timeout=5000]
+ */
+
+/**
+ * @typedef {Object} Notification
+ * @property {string} id
+ * @property {string} message
+ * @property {NotificationType} type
+ * @property {string} [title]
+ * @property {number} timeout
+ * @property {import("vue").Ref<boolean>} open
+ * @property {function():void} close
+ */
+
+/**
+ * @enum {string}
+ */
+export const NotificationType = {
+  ERROR: 'error',
+  WARNING: 'warning',
+  INFO: 'info',
+  SUCCESS: 'success',
+};
+
+/**
+ * @param {NotificationOptions} options
+ * @param {Notifier} notifier
+ * @returns {Notification}
+ */
+function createNotification(options, notifier) {
+  const {
+    type,
+    title,
+    message,
+    timeout,
+  } = options;
+  const id = uuidv4();
+  const open = ref(true);
+
+  return {
+    get id() { return id; },
+    get type() { return type; },
+    get title() { return title; },
+    get message() { return message; },
+    get timeout() { return timeout ?? 5000; },
+    get open() { return open; },
+    set open(value) {
+      open.value = value?.value ?? value; // when used as a v-model, this is set as a boolean
+      if (!open.value) {
+        this.close();
+      }
+    },
+    close() {
+      open.value = false;
+      setTimeout(() => {
+        notifier.remove(this);
+      }, 100);
+    },
+  };
+}
+
+/**
+ * API for adding snackbar notification to the VcsUiApp. This is simply a container and on its own will not render anything.
+ * Typically, you do not need to instantiate this yourself, but use the notifier on the {@see VcsUiApp}.
+ * @class
+ */
+class Notifier {
+  constructor() {
+    /**
+     * @type {import("vue").Ref<Array<Notification>>}
+     * @private
+     */
+    this._notifications = shallowRef([]);
+  }
+
+  /**
+   * @type {import("vue").Ref<Array<Notification>>}
+   * @readonly
+   */
+  get notifications() {
+    return this._notifications;
+  }
+
+  /**
+   * @param {NotificationOptions} notification
+   * @returns {Notification}
+   */
+  add(notification) {
+    const note = createNotification(notification, this);
+    this._notifications.value.push(note);
+    return note;
+  }
+
+  /**
+   * @param {Notification} notification
+   */
+  remove(notification) {
+    const index = this._notifications.value.indexOf(notification);
+    if (index > -1) {
+      this._notifications.value.splice(index, 1);
+    }
+  }
+
+  /**
+   * @param {Notification} notification
+   * @returns {boolean}
+   */
+  has(notification) {
+    return this._notifications.value.includes(notification);
+  }
+}
+
+export default Notifier;

package/src/notifier/notifierComponent.vue

@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <v-snackbar
+      dark
+      v-for="(notification) in notifications"
+      :key="notification.id"
+      v-model="notification.open"
+      :timeout="notification.timeout"
+    >
+      <v-icon
+        :color="notification.type"
+      >
+        {{ icon[notification.type] }}
+      </v-icon>
+      <span class="snack-title">{{ $t(notification.title || defaultTitle[notification.type]) }}</span>
+      <template #action="{ attrs }">
+        <VcsButton
+          icon="mdi-close"
+          small
+          v-bind="attrs"
+          @click="notification.open = false"
+        />
+      </template>
+      <span>{{ $t(notification.message) }}</span>
+    </v-snackbar>
+  </div>
+</template>
+
+<script>
+  import { VSnackbar, VIcon } from 'vuetify/lib';
+  import { inject } from 'vue';
+  import VcsButton from '../components/buttons/VcsButton.vue';
+  import { NotificationType } from './notifier.js';
+
+  export default {
+    components: {
+      VSnackbar,
+      VcsButton,
+      VIcon,
+    },
+    name: 'NotifierComponent',
+    setup() {
+      const app = inject('vcsApp');
+
+      return {
+        notifications: app.notifier.notifications,
+        icon: {
+          [NotificationType.ERROR]: 'mdi-alert-box',
+          [NotificationType.WARNING]: 'mdi-alert',
+          [NotificationType.INFO]: 'mdi-information',
+          [NotificationType.SUCCESS]: 'mdi-check-circle',
+        },
+        defaultTitle: {
+          [NotificationType.ERROR]: 'notification.error',
+          [NotificationType.WARNING]: 'notification.warning',
+          [NotificationType.INFO]: 'notification.information',
+          [NotificationType.SUCCESS]: 'notification.success',
+        },
+      };
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+.v-snack{
+  ::v-deep{
+    .v-snack__content{
+      display: grid;
+      gap: 8px 4px;
+      grid-template-columns: 20px auto;
+      .v-icon{
+        grid-row-start: 1;
+        grid-row-end: 3;
+        align-self: start;
+        font-size: 17px;
+      }
+    }
+    .v-snack__action{
+      align-self: flex-start;
+      margin-top: 4px;
+    }
+  }
+}
+</style>

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>